迁移到webpack4：从webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk，以及有个搜出来的中文解决办法是错的

最新推荐文章于 2024-07-28 00:56:04 发布

十方魔

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量4.8w

点赞数 24

分类专栏：前端/打包压缩/webpack 文章标签： webpack webpack4 代码分离打包压缩 splitChunksPlugin

本文链接：https://blog.csdn.net/github_36487770/article/details/80228147

版权

前端/打包压缩/webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在对着webpack中文指南一点点敲demo，在代码分离这一节遇到了一个报错：

webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

哦，原来是原来的插件不能用了，这个中文指南，标的是webpack4.7.0，结果这块都没更新啊。。。于是必应搜了一下，第一个出来的是这个

webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead 的解决方法

照着在webpack.config.js改了一下代码：

  module.exports = {
    plugins: [
-     new webpack.optimize.CommonsChunkPlugin({
-       name: 'common' // 指定公共 bundle 的名称。
-     })
    ],

+   optimization: {
+     splitChunks: {
+       name: 'common'
+     }
+   },

倒是不报错了，但仔细检查了一下，发现结果是：

//app.bundle.js 和 another.bundle.js 是共享 lodash模块的
                Asset       Size  Chunks             Chunk Names
    another.bundle.js   70.1 KiB       0  [emitted]  another
        app.bundle.js   70.2 KiB       1  [emitted]  app
another.bundle.js.map    668 KiB       0  [emitted]  another
    app.bundle.js.map    668 KiB       1  [emitted]  app
           index.html  253 bytes          [emitted]

app.bundle.js 和 another.bundle.js 的大小都在70kib左右(1kib = 1,024Byte)，相差无几且都大得不对劲，而且common.js根本没有生出来啊。。。这绝壁是有问题吧！！！

返回去老老实实看官方文档吧。。。

果然，是要这么配滴：

//optimization与entry/plugins同级
optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },

稍微解释一下含义

cacheGroups is an object where keys are the cache group names. All options from the ones listed above are possible: chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name. 可以自己设置一组一组的cache group来配对应的共享模块
commons里面的name就是生成的共享模块bundle的名字
With the chunks option the selected chunks can be configured.
chunks 有三个可选值，”initial”, “async” 和 “all”. 分别对应优化时只选择初始的chunks，所需要的chunks 还是所有chunks 。
minChunks 是split前，有共享模块的chunks的最小数目，默认值是1，但我看示例里的代码在default里把它重写成2了，从常理上讲，minChunks = 2 应该是一个比较合理的选择吧。

出来的结果是：

                Asset       Size  Chunks             Chunk Names
    commons.bundle.js   69.5 KiB       0  [emitted]  commons
    another.bundle.js   1.21 KiB       1  [emitted]  another
        app.bundle.js   1.26 KiB       2  [emitted]  app
commons.bundle.js.map    664 KiB       0  [emitted]  commons
another.bundle.js.map    6.9 KiB       1  [emitted]  another
    app.bundle.js.map   7.31 KiB       2  [emitted]  app
           index.html  317 bytes          [emitted]