webpack打包之分離第三方類庫

使用webpack打包工程，通常會需要分離第三方類庫和應用本身的代碼，因為第三方類庫更新頻率不高，這樣瀏覽器可以直接從緩存讀，不需要項目每次上線再獲取一次。

以react為例，正常情況下，最初是這么配置的：

module.exports = {
    entry: {
        app: "./src/App.js",
        vendor: ["react", "react-dom"]
    },
    output: {
        path: __dirname + "/dist",
        filename: "[name].[chunkhash:8].js",
        publicPath: "/dist/"
    },
    ...
    plugins: [
        ...
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor"]
        })
    ]
};

然后我們會發現，一旦應用代碼發生變化，重新打包后app.js和vendor.js的hash值都會發生變化，具體原因大致就是由於app.js變了，webpack會生成一段runtime注入vendor.js，導致vendor.js也變了（因為兩者有關聯）。

解決方法目前我知道二種比較好。

第一種是利用webpack.DllPlugin，具體使用方法網上很多，配置稍微有點復雜，這里不列舉了。

第二種方法是利用CommonsChunkPlugin生成一個專門跟蹤vendor.js變化的js文件，一般可以取名manifest.js，具體配置如下：

module.exports = {
    entry: {
        app: "./src/App.js",
        vendor: ["react", "react-dom"]
    },
    output: {
        path: __dirname + "/dist",
        filename: "[name].[chunkhash:8].js",
        publicPath: "/dist/"
    },
    ...
    plugins: [
        ...
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "manifest"]
        })
    ]
};

其中CommonsChunkPlugin的配置還能這么配：

module.exports = {
    ...
    plugins: [
        ...
        new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor"]
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names: ["manifest"],
            chunks: ["vendor"]
        })
    ]
};

完成后我們修改應用代碼，再重新打包，結果vendor.js的hash值不再發生變化。

我看過的網上的教程，基本上都到這里就結束了。然而當我運行代碼，想查看效果，結果卻是空白頁，chrome下有報錯：

？？？

當時真是一下就懵了。google、stackoverflow搜了好久都沒找到滿意的答案（可能是搜商比較低）。

后來我無意中去看生成的index.html，發現里面插入的js順序是這樣的：

然后再打開chrome里的第一行報錯：

發現報錯是從app.js開始的。正常情況下應該是app.js引用vendor.js中的方法，即app.js的加載順序應該在vendor.js之后，但現在順序卻顛倒了，會不會是這個原因造成的？

於是我們手動修改index.html，交換一下app.js和vendor.js的加載順序。再重新運行代碼，結果顯示正確了。

看來是chunks注入順序混亂導致的，那有沒有方法按照正確的引用順序注入呢？這就要看html-webpack-plugin插件了。

原本關於html-webpack-plugin插件我們是這么配的：

module.exports = {
    ...
    plugins: [
        ...
        new HtmlPlugin({
            filename: "../index.html",
            template: __dirname + "/src/templates/index.html"
        })
    ]
};

而html-webpack-plugin中有個配置項叫chunksSortMode，它可以指定chunks注入的順序，其可以配置為："none" | "auto" | "dependency" | {function}。默認配置是"auto"。

現在我們加上這個配置項，並配置為"dependency"：

module.exports = {
    ...
    plugins: [
        ...
        new HtmlPlugin({
            filename: "../index.html",
            template: __dirname + "/src/templates/index.html",
            chunksSortMode: "dependency"
        })
    ]
};

然后再重新打包，再看index.html，發現這下app.js在vendor.js后面了，最后運行程序也能正常顯示了。