我想将我的供应商代码分成两个块,一个包含所有角度库,另一个包含其他所有内容 .
我的角度应用程序有一个入口点,并设置如下:
entry: {
app: './path_to/app.js',
vendor: ['jquery', 'moment', 'numeral'],
'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs']
}
然后我使用CommonsChunkPlugin配置另外两个bundle:
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包含除角度内容之外的所有第三方库
vendor.angular.bundle.js包含所有有角度的内容以及所有已经在vendor.bundle.js中的第三方库 .
反正是否有必须在vendor.angular.bundle.js中捆绑角度模块,而不自动包含其他第三方库?
1 回答
想出这个:
插件数组中CommonsChunkPlugin的顺序 .
要获得所需的“分块”,这是我必须做出的改变:
重新订购CommonsChunkPlugins,以便角度块首先出现 .
更新下面的'vendor'配置以在'chunks'数组中使用'vendor.angular' .
更新的CommonsChunkPlugins现在看起来像:
以上现在产生:
运行:
我能够验证所有与角度相关的模块现在都在vendor.angular.bundle.js中,所有非角度模块确实在vendor.bundle.js中