webpack使用筆記

安裝

npm install -g webpack // 全局安裝
npm install --save-dev webpack //本地安裝

在完成全局安裝和本地安裝以後，就能夠開始進行webpack的使用了。

嘗試打包

安裝完成以後，咱們能夠嘗試使用webpack進行一次簡單的打包。
webpack最基本的命令就是webpack，能夠直接使用webpack命令對文件進行編譯，例如

webpack main.js bundle.js

上述代碼就能將main.js文件打包成bundle.js文件。

使用配置文件

也能夠在webpack配置文件中設置好參數後直接運行webpack命令進行打包。在項目根目錄下新建webpack.config.js，webpack會默認其爲配置文件。

module.exports = {
  entry:  __dirname + "/src/main.js", //設置main.js爲項目入口
  output: {
     path: __dirname + "/public",//設置public爲編譯後的目錄
     filename: "bundle.js"//編譯後輸出文件的文件名
  }
}

注意：__dirname是指項目根目錄，必需要加上，這樣在打包以後才能準確找到相應目錄。
配置好以後，在命令行中直接輸入webpack就能獲得前面的一樣的結果。
接下來也能夠在package.json文件中配置webpack命令的代替方式，以下

"scripts": {
  "start":"webpack"
}

這樣直接輸入 npm run start也能取得一樣的效果。
若是想要執行自定義webpack的配置文件的話，可使用以下代碼

webpack --config webpack.dev.config.js

這樣就能將配置文件設置爲webpack.dev.config.js了。也能夠在package.json中去設置

"scripts": {
  "webpack":"webpack --config webpack.dev.config.js"
}

運行 npm run webpack，就能實現和上面代碼同樣的功能，將配置文件設置爲webpack.dev.config.js並執行。

配置文件解析

在配置文件中，entry字段能夠分別設置爲如下三種形式：
1.字符串
指定這個目錄下的文件爲入口文件

entry:'main.js' //指定main.js爲入口文件

2.數組
存在多個入口文件的時候，使用數組方式能夠添加多個互相不依賴的文件

entry:['src/main.js','dist/index.js']  //兩個文件會被打包爲一個文件

3.對象
指定多個文件打包成多個文件以供不一樣頁面使用

{
    entry:{
        'mainEntry':'src/main.js',
        'indexEntry':'src/index.js'
    },
    output:{
        path:'/dist',
        filename:'[name].js' //執行後會打包成mainEntry.js和indexEntry兩個文件
    }
}

output最經常使用的兩個屬性分別是filepath和filename。
其中filepath是一個絕對路徑，指定打包生成以後的文件存放的目錄。fliename指定打包生成以後的文件名。
根據上述entry字段的敘述，咱們有時候會同時指定多個入口文件，若是隻是在output.filename中指定一個文件名，那麼會將兩個入口文件打包到一個文件中去。這時候咱們可使用佔位符的方式來指定output.filename，這樣就能根據相應的入口文件打包出相應的文件了。
佔位符能夠設置如下內容：

name 模板名稱，對應上面的mainEntry和indexEntry
hash 總體的hash值
chunkhash 分片的hash值

hash和chunkhash

爲何會有hash和chunkhash值呢？其實，hash值是在整個打包過程當中每一次版本變化生成的值，這樣一來，一旦某一個資源文件有發生變化，則整個hash值就會發生改變，從而致使全部打包出來的文件的文件名都會發生變化。
怎樣避免這個問題呢，那就是使用chunkhash，chunkhash是根據具體的模塊的變化來生成的值，因此某一個文件的變化只會影響到它本身的chunkhash值的變化。
例如：

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[hash].js"
    }
}

使用name加hash的方式來命名打包後的文件，生成的結果以下

Hash: 8449fbacd884544a83ed
Version: webpack 2.5.1
Time: 57ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-8449fbacd884544a83ed.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-8449fbacd884544a83ed.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

兩個打包以後的文件擁有同一個hash值8449fbacd884544a83ed，一旦main.js和index.js其中的一個文件發生變化，則會引發總體的hash值變化。
若是使用chunkhash的話，若是所示：

{
    entry:  {
        mainEntry:__dirname + "/app/main.js",
        indexEntry:__dirname + "/app/index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name]-[chunkhash].js"
    }
}

生成結果以下：

Hash: 41e84bc2e3034e423af1
Version: webpack 2.5.1
Time: 54ms
                             Asset     Size  Chunks             Chunk Names
 mainEntry-d4d7121b09d82bb73a8e.js  2.73 kB       0  [emitted]  mainEntry
indexEntry-252220e65aed8b7f327b.js  2.71 kB       1  [emitted]  indexEntry
   [0] ./app/index.js 76 bytes {1} [built]
   [1] ./app/main.js 84 bytes {0} [built]

一樣也會生成hash值，可是兩個文件的chunkhash值是互不影響的，其中的一個文件發生變化，則只會改變發生變化文件打包後的文件名。
看上去好像chunkhash能取代hash的做用，可是我認爲hash的存在確定有其適用的場景。好比在作靜態資源大版本管理和文件夾命名的時候就能用上，確定還會有更多其餘可能的場景。

使用plugin

在使用hash和chunkhash來爲打包以後的文件名作版本，每次打包以後會生成新的文件名，咱們沒法預知每一次打包以後的文件名，因此有什麼辦法能夠一次實現html文件中對打包文件進行引用呢？
這裏咱們可使用html-webpack-plugin這個插件來幫咱們完成。

1. 在項目目錄中對插件進行安裝：

npm install html-webpack-plugin --save-dev

1. 在配置文件中對插件進行引用:

var htmlWebpackPlugin = require('html-webpack-plugin')

1. 使用並配置插件參數
   插件的使用方式是直接在配置文件中添加一個值爲數組的屬性：

plugins:[
  new htmlWebpackPlugin();  //不加任何參數直接新建插件對象是最基本使用方式
]

這樣就能在output.path指定的目錄中生成一個新的index.html文件，這個index.html文件會將全部打包完成以後的靜態資源進行引用。因爲每次從新打包以後的index.html文件是從新生成的，因此就解決了上面咱們打包以後的靜態資源文件名不斷變化的問題。
因爲咱們沒有進行任何的參數設置，因此webpack會用默認的模板打包生成一個文件，咱們也可使用自定義模板的方式進行打包生成。

new htmlWebpackPlugin({
  template:'index.html', //webpack會在根目錄下尋找index.html文件做爲模板
  fliename:'main.html', //還能夠自定義打包生成以後的文件名
})

這樣咱們就能使用根目錄下的index.html文件做爲模板，在output.path下打包生成一個名爲main.html的文件，這個文件包含了咱們打包以後的靜態資源文件的引用。
可是咱們真實項目中不一樣類型的靜態資源存放的目錄不同，這裏其實能夠在filename屬性中來指定帶目錄的文件名。

filename:__dirname+'/dist/views/index.html'

這樣咱們就能將打包以後的html文件和js文件分開存放了。
另外，咱們若是須要進行多頁面開發的話，能夠屢次建立新的htmlWebpackPlugin對象來配置。大致模板以下：

new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'main.html', 
}),
new htmlWebpackPlugin({
  template:'index.html', 
  fliename:'side.html', 
}),
...

html-webpack-plugin插件的其餘配置參數和使用方法能夠去官網查看。

使用loader編譯ES6代碼

經過使用loader，webpack能實現對各類各樣的文件進行處理。
loader須要在配置文件中的modules下進行配置，主要包括如下字段：

test 一個匹配該loader所須要處理的文件拓展名的正則表達式
loader loader的名稱
include/exclude 指定要處理的文件夾/屏蔽不須要處理的文件夾
query 額外選項

使用 babel

babel須要在命令行中安裝單獨的包

npm install --save-dev babel-core babel-loader babel-preset-es2015

以上是本地安裝，須要在項目根目錄下執行。
按照上面的loader配置方法，咱們能夠按照以下模板來配置babel

module:{
  loaders:[{
    test:/\.js$/, //以.js結尾的文件都是babel須要處理的
    loader:'babel-loader', //loader的名稱
    exclude:/node_modules/, //忽略node_modules目錄下的全部文件
  },{} //多個loader用逗號分隔開
  ,...]
}

配置完以後在項目根目錄下建立文件.babelrc，並在文件中寫入如下內容：

注：在windows系統下不能直接建立.babelrc文件，能夠在根目錄下打開命令行輸入type null>.babelrc命令建立

{ "presets": [ "es2015" ] }

完成以後執行webpack命令，在編譯js文件的時候就會使用babel-loader將文件中的ES6代碼編譯成瀏覽器可執行的ES5代碼。