用webpack将供应商库分成多个块
我想将我的供应商代码分成两个块，一个包含所有angular库，另一个包含所有其他的东西。
我的angular度应用程序有一个单一的入口点，并设置如下所示：
entry: { app: './path_to/app.js', vendor: ['jquery', 'moment', 'numeral'], 'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs'] } 然后我使用CommonsChunkPlugin来configuration其他两个包：
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ['app'], warnings: false, filename: 'vendor.bundle.js' }) new webpack.optimize.CommonsChunkPlugin({ name: 'vendor.angular', chunks: ['app'], warnings: false, filename: 'vendor.angular.bundle.js' })
这会生成3个文件：
Version: webpack 1.13.1 Time: 12719ms Asset Size Chunks Chunk Names app.bundle.js 19.2 kB 0 [emitted] app vendor.bundle.js 484 kB 1 [emitted] vendor vendor.angular.bundle.js 652 kB 2 [emitted] vendor.angular [0] multi vendor.angular 124 bytes {2} [built] [0] multi vendor 88 bytes {1} [built] + 124 hidden modules
app.bundle.js包含我的应用程序代码。
vendor.bundle.js包含除angular度外的所有第三方库
vendor.angular.bundle.js包含所有angular色的东西和我已经在vendor.bundle.js中的所有第三方库。
反正有没有只包含vendor.angular.bundle.js捆绑的angular度模块，而不自动包含其他第三方库？
想通了：
CommonsChunkPlugin在插件数组中的顺序。
为了得到所需的“组块”，下面是我必须做出的改变：
- 重新命令CommonsChunkPlugins，以便angular块首先。
- 更新下面的'vendor'configuration以在'chunks'数组中使用'vendor.angular'。
更新的CommonsChunkPlugins现在看起来像：
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor.angular', chunks: ['app'], warnings: false, filename: 'vendor.angular.bundle.js' }) new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', chunks: ['vendor.angular'], warnings: false, filename: 'vendor.bundle.js' })
以上现在得出：
Version: webpack 1.13.1 Time: 7451ms Asset Size Chunks Chunk Names app.bundle.js 19.2 kB 0 [emitted] app vendor.bundle.js 484 kB 1 [emitted] vendor vendor.angular.bundle.js 221 kB 2 [emitted] vendor.angular [0] multi vendor.angular 124 bytes {2} [built] [0] multi vendor 88 bytes {1} [built] + 124 hidden modules
运行：
webpack --progress --display-modules --display-chunks -v
我能够validation所有angular度相关的模块现在在vendor.angular.bundle.js中，所有非angular度模块确实在vendor.bundle.js中