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

Question

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

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

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 包含所有第 3 方库，不包括 angular stuff
vendor.angular.bundle.js 包含所有 angular 内容以及我所有已经在 vendor.bundle.js.

中的第 3 方库

是否可以仅将 angular 模块捆绑在 vendor.angular.bundle.js 中，而不自动包含其他第 3 方库？

Answer 1

想通了：

CommonsChunkPlugin 在插件数组中的顺序。

为了获得所需的 'chunking'，这是我必须做出的更改：

重新排序 CommonsChunkPlugins 以便 angular 块首先.
更新下面的 '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

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

Split vendor libraries into multiple chunks with webpack

javascript

angularjs

node.js

webpack

commonschunkplugin