使用webpack将供应商库拆分为多个代码块

Question

我希望将我的供应商代码分成两个部分，一个包含所有Angular库，另一个包含其他所有内容。

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

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 包含了除了 Angular 相关的所有第三方库。
vendor.angular.bundle.js 同时包含了所有 Angular 相关的内容和 vendor.bundle.js 中已经存在的所有第三方库。

是否有任何方法可以仅将 Angular 模块捆绑到 vendor.angular.bundle.js 中，而不自动包含其他第三方库？

- Nick

---

如果你将代码块命名为 angular_stuff 而不是 vendor.angular 会发生什么？这只是一个猜测，但或许点符号导致 webpack 包含了供应商的内容。 - andzep

@andzep 不起作用，已经尝试过了。大小没有任何区别。 - Nick

@andzep 在供应商/角度供应商部分中设置这一点并不会改变输出文件的大小。 - Nick

好的，最后一个想法……如果您更改CommonsChunkPlugin块的顺序……它是否会改变文件大小？也许是因为第一个优化的公共块具有'app'块，然后第二个自动包含第一个。 - andzep

也许可以尝试使用这个插件来进行代码压缩：webpack.optimize.UglifyJsPlugin......抱歉多次尝试和错误 :-)....好的，我会离开一段时间。在此期间祝你好运。 - andzep

Answer 1

我已经弄清楚了：

插件数组中CommonsChunkPlugin的顺序很重要。

为了得到期望的“分块”，我需要进行如下更改：

1. 重新排列CommonsChunkPlugins，使angular块成为第一个。
2. 在下面的“vendor”配置中更新“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

我可以确认所有与Angular相关的模块现在都在vendor.angular.bundle.js文件中，而所有非Angular模块确实在vendor.bundle.js文件中。

- Nick