Error: webpack.optimize.CommonsChunkPlugin has been removed,

如果使用中文webpack文档做代码分离，会有报错，报错详情是：

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

解决办法可以参考官方英文文档：https://webpack.js.org/guides/code-splitting/

具体实现如下：如下optimization配置

module.exports = {    entry: {        app: "./src/index.js",        another: './src/another-module.js'    },    plugins: [        new HtmlWebpackPlugin ({            title: "code Splitting "        }),    ],    optimization: {        splitChunks: {            chunks: 'all'        }    },    output: {        filename: "[name].bundle.js",        path: path.resolve (__dirname, 'dist')    },};

然后执行npm run build，运行结果如下：

在这里生成了一个名字为 vendors~another.bundle.js的文件，如果不想用这个默认生成的名称完全可以，自己命名。

给optimization配置一个name属性

optimization: {       splitChunks: {       chunks: 'all',       name:'common'   }},

再次执行npm run build ,会发现生成了一个common.bundle.js，没问题

交流

我是老礼，公众号「进军全栈攻城狮」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

本文分享自微信公众号 - 进军全栈攻城狮（terminals_li）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/4624678/blog/4538740

标签

Webpack

npm

javascript

Terminals