Webpack 3迁移至4报错：找不到CommonsChunkPlugin模块

这个问题我从Webpack 3迁移到4的时候也碰到过，原因很明确：Webpack 4已经完全移除了webpack/lib/optimize/CommonsChunkPlugin，它的代码分割功能被整合到内置的optimization.splitChunks和optimization.runtimeChunk配置中了。

具体修改步骤： #

1. 删除旧的CommonsChunkPlugin配置
   先把你webpack配置文件里所有引用和使用该插件的代码删掉，比如类似这样的代码块：

   // 删掉这行引入
   const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
   
   // ...
   
   plugins: [
     // 删掉这些插件实例
     new CommonsChunkPlugin({
       name: 'vendor',
       minChunks: module => module.context.includes('node_modules')
     }),
     new CommonsChunkPlugin({
       name: 'runtime'
     })
   ]
   

2. 添加Webpack 4内置的优化配置
   在你的webpack配置中新增optimization字段，替换原来的插件功能：

   module.exports = {
     // ... 你的其他webpack配置（entry、output、module等）
     optimization: {
       splitChunks: {
         chunks: 'all', // 对所有类型的chunk（同步+异步）生效
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/, // 匹配node_modules中的第三方依赖
             name: 'vendor', // 生成的chunk名称
             priority: -10 // 优先级高于common，确保第三方依赖优先被提取
           },
           common: {
             name: 'common',
             minChunks: 2, // 至少被2个不同chunk引用的代码才会被提取
             priority: -20,
             reuseExistingChunk: true // 如果已经有一个chunk包含了当前要提取的代码，直接复用
           }
         }
       },
       runtimeChunk: 'single' // 把webpack的运行时代码提取到单独的runtime chunk中
     }
   };
   

3. 确保依赖版本兼容
   Webpack 4需要搭配对应的webpack-dev-server版本，建议安装3.x版本：

   npm install webpack-dev-server@3 --save-dev
   

额外说明： #

如果你的场景不需要太复杂的自定义分割，Webpack 4的splitChunks默认配置已经能满足大部分需求，你甚至可以简化成：

optimization: {
  splitChunks: { chunks: 'all' },
  runtimeChunk: 'single'
}

内容的提问来源于stack exchange，提问作者Tonio