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

时间:2016-07-22 20:15:37

标签: javascript angularjs node.js webpack commonschunkplugin

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

我的角度应用程序有一个入口点,设置如下:

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角度模块捆绑在vendor.angular.bundle.js中,而不自动包含其他第三方库?

1 个答案:

答案 0 :(得分:4)

想出来:

插件数组中CommonsChunkPlugin的顺序。

要获得所需的'分块,我必须做出改变:

  1. 重新订购CommonsChunkPlugins以便角度块 第一
  2. 更新供应商'在下面配置使用' vendor.angular'在'块中'阵列。
  3. 更新的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