拆分供应商库与的WebPack

问题描述：

多个块，我想我的供应商代码分成两个块，一个包含所有角图书馆，另一种包含一切。拆分供应商库与的WebPack

我的角度应用程序有一个单一的入口点，并且设置是这样的：

entry: { 
    app: './path_to/app.js', 
    vendor: ['jquery', 'moment', 'numeral'], 
    'vendor.angular': ['angular', 'angular-route', 'angular-numeraljs'] 
}

我然后使用CommonsChunkPlugin来配置其它两个包：

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捆绑角模块，不自动包括其他第三方库？

如果你调用块'angular_stuff'，而不是发生'vendor.angular'？ ......这只是一种预感，但也许点符号会导致webpack包含供应商的东西。 – andzep

@andzep不起作用，试过了。尺寸无差异。 – Nick

另外，看文档。 CommonsChunkPlugin有一个选项'minChunks：Infinity'，其目的是：'用更多的条目，这确保没有其他模块进入供应商块......所以也许这是缺少的选择。 – andzep

答

想通了这一点：

的CommonsChunkPlugin的插件数组中的问题的顺序。

以获得所需的“分块”，这是我不得不做出的改变：

重新排序CommonsChunkPlugins使角块是第一。
更新“供应商”下面配置使用“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

我能确认所有的角相关模块现在位于vendor.angular.bundle.js和全部无角模块的确是vendor.bundle.js

拆分供应商库与的WebPack

相关推荐