webpack打包生成多個vendor的配置方法

用webpack打包項目的時候，一般喜歡把一些公用的庫打包的vendor.js里面，比如像react，react-router，redux等。

隨着引入的庫越來越多，vendor文件也變得越來越大，於是考慮打包成兩個vendor，把和react相關的庫打包成一個vendor，其他的庫打包成另外一個vendor。按照webpack的文檔開始配置，需要注意有兩個比較坑的地方。

參考配置：

...
entry: { 
    "vendor1": ["react", "react-dom", "react-router", "react-router-redux", "react-redux", "redux"], 
    "vendor2": ["crypto-js", "fastclick"],
    "app": "./js/index.js" 
},
...
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        names: ["vendor2","vendor1"],
        minChunks: Infinity
    })
],
...

第一個要注意的地方，在CommonsChunkPlugin里面，vender的順序要反着來，總之，要和加載順序相反。比如你想按vendor1，vendor2的順序加載，entry里面寫的是vendor1，vendor2，在CommonsChunkPlugin里面要寫vendor2，vendor1。

 

第二個要注意的地方，output.filename一定不要寫死了，要配置成可替換的，類似filename: '[name].js'形式。

 

 

參考鏈接：

https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks

https://github.com/webpack/webpack/issues/1016