升级Webpack至最新版本时遇找不到CommonsChunkPlugin模块错误

我之前升级Webpack到最新版时也碰到过完全一样的问题！虽然你自己的代码里没用到CommonsChunkPlugin，但这个报错大概率是你项目里的某个第三方依赖（插件/loader）还在调用这个已经被废弃的模块——毕竟CommonsChunkPlugin在Webpack 4及以后的版本里就被移除了，换成了内置的splitChunks配置，最新版Webpack根本没有这个文件，所以依赖它的包就会报错。

下面是我亲测有效的解决步骤：

• 第一步：定位到底哪个依赖在引用旧插件
  用你的包管理器命令排查依赖树：

  • 如果你用npm：运行 npm ls CommonsChunkPlugin
  • 如果你用yarn：运行 yarn why CommonsChunkPlugin
    这个命令会列出所有依赖CommonsChunkPlugin的包，找到那个还在使用旧API的依赖，这就是问题根源。

• 第二步：更新或替换有问题的依赖
  找到问题包后：

  1. 先去这个包的官方仓库看看有没有适配Webpack最新版的更新，直接升级到最新稳定版，很多时候更新后就解决了（比如旧版的html-webpack-plugin就有这个问题，更新后就不再依赖旧插件了）。
  2. 如果这个包已经停止维护，找它的替代方案：比如extract-text-webpack-plugin在Webpack 4+已经被mini-css-extract-plugin替代，这类场景直接换用新插件即可。

• 第三步：彻底清理依赖缓存并重装
  光删node_modules有时候不够，还要清理包管理器的缓存和锁文件：

  • npm用户：

    npm cache clean --force
    rm -rf package-lock.json node_modules
    npm install
    

  • yarn用户：

    yarn cache clean
    rm -rf yarn.lock node_modules
    yarn install
    

• 第四步：检查配置文件的隐性引用
  偶尔也会出现自定义配置或继承的模板间接引用了旧插件的情况，仔细检查你的webpack.config.js，以及你引入的任何外部配置文件，确保没有require或importCommonsChunkPlugin的代码。

如果以上步骤还是没找到问题，可以试试逐步移除依赖：每次移除一个非核心依赖后重新构建项目，看什么时候报错消失，这样就能精准定位到那个“搞事情”的包了。

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