webpack打包分离第三方库和业务代码

使用webpack打包工程，通常会需要分离第三方类库和应用本身的代码，因为第三方类库更新频率不高，这样浏览器可以直接从缓存读，不需要项目每次上线再获取一次。

以react为例，正常情况下，最初是这么配置的：

 1 module.exports = {
 2     entry: {
 3         app: "./src/App.js",
 4         vendor: ["react", "react-dom"]
 5     },
 6     output: {
 7         path: __dirname + "/dist",
 8         filename: "[name].[chunkhash:8].js",
 9         publicPath: "/dist/"
10     },
11     ...
12     plugins: [
13         ...
14         new webpack.optimize.CommonsChunkPlugin({
15             names: ["vendor"]
16         })
17     ]
18 };

然后我们会发现，一旦应用代码发生变化，重新打包后app.js和vendor.js的hash值都会发生变化，具体原因大致就是由于app.js变了，webpack会生成一段runtime注入vendor.js，导致vendor.js也变了（因为两者有关联）。

解决方法目前我知道二种比较好。

第一种是利用webpack.DllPlugin，具体使用方法网上很多，配置稍微有点复杂，这里不列举了。

第二种方法是利用CommonsChunkPlugin生成一个专门跟踪vendor.js变化的js文件，一般可以取名manifest.js，具体配置如下：

 1 module.exports = {
 2     entry: {
 3         app: "./src/App.js",
 4         vendor: ["react", "react-dom"]
 5     },
 6     output: {
 7         path: __dirname + "/dist",
 8         filename: "[name].[chunkhash:8].js",
 9         publicPath: "/dist/"
10     },
11     ...
12     plugins: [
13         ...
14         new webpack.optimize.CommonsChunkPlugin({
15             names: ["vendor", "manifest"]
16         })
17     ]
18 };