webpackCommonChunk最佳配置

webpack.optimize.CommonsChunkPlugin插件用於抽取模塊中的複用部分，以減小打包的代碼量，咱們還須要考慮到緩存的優化

首先是文件名包含文件的hash值，只有在文件有變更時hash值纔會變

其次咱們想要將引用的js資源進行幾個文件的拆分，

• 第一個文件是最不常常變更的第三方的庫文件，

• 第二個文件是業務的公用組件

• 第三個文件是每個頁面的js代碼

咱們的最佳配置以下：

entry: {
        vender:['./src2/Vue.js','./src2/vender.js'],  //指明vender的庫
        common: ['./src2/component1.js','./src2/component2.js'],
        global:['./src2/global.js'], //須要全局進行配置的代碼
        page1: ['./src2/page1.js'],
        page2: ['./src2/page2.js']
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['common','vender','boot'], 
            filename: '[name].[chunkhash].js',
            minChunks: 2
        })
]

minChunks是配置模塊複用多少次以上進行抽取。

chunkhash 是這個chunk的hash，而hash是對全部打包的js總體生成的hash，因此爲了對緩存的優化，咱們採用chunkhash。

CommonsChunkPlugin中配置的name和entry中配置的入口之間有什麼關係？

若是CommonsChunkPlugin 中配置的name在entry中存在，那麼這個抽取的模塊首先是包含enry中指定的js文件，而後再考慮包含抽取其餘entry中的公用部分。

爲何要在common中配置boot？

由於配置CommonsChunkPlugin插件之後，就須要在window上掛載window["webpackJsonp"]方法，這個方法中有全部chunk的chunkhash，因此只要有chunk變化，那麼這個腳本就變化，因此應該把這個啓動腳本單獨抽成一個文件，不然就會影響其餘不變的文件也改變hash值。

CommonsChunkPlugin中配置的name順序有什麼關係，每個公用模塊的抽取邏輯是什麼？

這個沒有找到官方的解釋，經過實踐，我認爲應該是倒序考慮的，首先是啓動腳本放在數組的最後一個文件中，例如boot中。
每個模塊的邏輯以下：

首先看本身有沒有對應的entry，若是有則抽取entry對應的模塊，並遞歸抽取模塊中公用的模塊。例如common中的component1.js和component2.js共同依賴jquery，則common中也抽取jquery。

其次看數組中是否還有上一個元素，若是沒有則將全部entry中剩餘沒有抽取的公用模塊也都抽取出來，若是有則交給上一個元素，本身也就執行完了。例如vender先將Vue.js和vender.js抽取出來，而後發現還有common模塊，因此本身就執行完了，common先將component1.js和component2.js抽取出來之後，發現上面沒有文件了，因此就把entry中剩餘沒有抽取的公共模塊也抽取出來了，好比page1.js和page2.js公用的componet4.js。

這樣打包之後咱們須要保證頁面中文件引用的順序，由於他們之間有了依賴關係，例如上面的配置頁面的引用順序應該是
1 boot.js
2 vender.js
3 common.js
而後是每個頁面的js page1.js 或者page2.js

如何保證頁面中js文件的引用順序?

HtmlwebpackPlugin插件提供了 chunksSortMode方法，能夠對頁面中引用的chunk進行排序，咱們先定義chunk的順序數組，而後相似於數組的sort，用小的減去大的返回正序。

var chunksort = ['boot','vender','common','global'];
new HtmlwebpackPlugin({
    chunks: ['boot','vender','common','global',page.outputPath],
    title: page.title,
    // extra: extra, //包含頁面額外的配置信息
    template: "src/index.html",
    filename: page.outputPath + '.html',
    chunksSortMode: function (a, b) {
        var aIndex =chunksort.indexOf(a.names[0]);
        var bIndex =chunksort.indexOf(b.names[0]);
        aIndex = aIndex < 0 ? chunksort.length + 1 : aIndex;
        bIndex = bIndex < 0 ? chunksort.length + 1 : bIndex;
        return aIndex - bIndex;
    }
})