用webpack将供应商库分成多个块

Question

我想将我的供应商代码分成两个块，一个包含所有的角库，另一个包含其他的库。

我的角应用程序只有一个入口点，设置如下：

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中，而不自动包括其他第三方库？

Answer 1

明白了这一点：

插件数组中Commons春kPlugin的内容的顺序。

为了得到想要的“块状”，下面是我必须做的改变：

1. 重新排序CommonsChunkPlugins，以便角块是第一个。
2. 更新下面的“供应商”配置，以便在“块”数组中使用“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中。