簡單的webpack入門

1.新建一個node項目，內容為

• /app
  • index.html
  • entry.js
• package.json
• bundle.js
• webpack.config.js

    cd app && npm init

在index.html中引入bundle.js，作為打包之后的集成文件

在entry.js中寫一個簡單的語句

    document.write('hello world');

然后使用webpack打包到bundle.js中

    webpack entry.js bundle.js

使用瀏覽器打開index.html即可看到效果

具有模塊引用的文件打包

新建一個module.js，并寫入一些語句

module.exprots = 'It was work form module'

再在entry.js中引入這個模塊

var text = require('./module.js');
document.write(text);

重新打包，即可看到效果

    hello wrold It was work form module

使用css-loader引入css模塊

在webpack的世界里，所有都是模塊，所以css也不例外，我們可以通過css-loader讀取它，然后再使用style-loader把它插入到html頁面中

先安裝css-loader和style-loader這兩個包

    npm install css-loader style-loader

在entry.js中引入style.css

    require('!style!css!./style.css')       //載入style.css
    var text = require('./module.js');
    document.write('hello world');
    document.write(text);

如果每次都寫成!style!css!./style.css則會非常繁瑣，webpack可以根據模塊的擴展名去自動綁定需要的loader

修改entry.js中的寫法

    require('./style.css')       //載入style.css
    var text = require('./module.js');
    document.write('hello world');
    document.write(text);

然后打包必須這樣進行

    webpack entry.js bundle.js --module-bind "css=style!css"

強大的配置

上面的操作都是手動運行，實在是太麻煩了，因此我們需要用到webpack的配置文件，根據配置去打包對應的模塊。

先在根目錄新建webpack配置文件

    vim webpack.config.js

然后寫好對應的配置

    var webpack = require('webpack');
    module.exports = {
        entry:'entry.js',  //配置入口文件
        output:{
            path:__dirname, //配置輸出文件絕對路徑，一般使用__dirname獲取當前模塊路徑
            filename:'bundle.js' //輸出文件名
        },
        //配置nodejs模塊
        module:{
            //配置加載器
            loaders:[
                //使用正則匹配目標文件，使用使用css-load和style-load把css插入到頁面中去
                {test:/\.css$/,loaders:['style-loader','css-loader']}
                //webpack已經不允許使用style,css這種loader的名稱了,要使用style-loader
            ]
        }
    }

最后在項目根目錄使用 webpack 即可根據配置文件來打包項目

npm命令的一些常識

• 如果需要新建一個項目,必須要使用 npm init 命令,在package.json中配置好項目所需要的依賴
  npm install webpack --save-dev 后面--save-dev的意思是將包信息添加到devDependencies,表示開發時依賴的包,--save是指將包信息添加到dependencies,表示你發布時依賴的包

使用nodejs插件快速生成html文件

有時候我們不想自己手動創建html文件,可以使用nodejs插件創建

npm install html-webpack-plugin --save-dev
有了這個插件之后,可以在webpack配置進行配置了

var path =require('path');
var HTMLwebpackPlugin = require('html-webpack-plugin');
//定義一些文件夾,項目文件就放這里
var ROOT_PATH = path.resolve(__dirname);  //獲取當前模塊絕對路徑
var APP_PATH = path.resolve(ROOT_PATH,'app');  //指定項目源碼目錄
var BUILD_PATH = path.resolve(ROOT_PATH,'build'); //指定構建輸出目錄

module.exports = {
   //項目入口,如果指定到文件夾則會尋找index.js作為入口js,如果指定到某個js,則會以其為入口文件
    entry:APP_PATH;
    output:{
        path:BUILD_PATH,
        filename:'bundle.js'
    }
},
//添加我們的插件,會自動生成一個html文件
plugins:[
    new HTMLwebpackPlugin({
        title:'hello webpack'
    })
]

使用webpack本地服務器

npm install webpack-dev-

然后需要在webpack.config.js里面對這個服務器進行配置

    module.exports = {
        ...
        devServer:{
            historyApiFallback: true,
            hot: true,
            inline: true,
            progress: true,
        }
        ...
    }

然后在package.json里面配置一下運行的命令,npm支持自定義一些命令短語
"script":{
"start":"webpack-dev-server --hot --inline"
//key是要運行的命令的短語,value是需要運行的命令
}
然后在項目根目錄運行 npm start 命令,打開瀏覽器輸入 localhost:8080即可

總結

webpack將所有的資源都視作模塊,使用Common.js的語法進行模塊的引入,掛載

webpack入門總結