npm报ERESOLVE错误：uglifyjs-webpack-plugin与webpack版本冲突如何解决

运行环境信息：

• Node版本：16.13.0
• npm版本：8.12.1
  在D盘ShowCase项目目录执行npm install命令时，出现依赖解析失败报错，错误码为ERESOLVE，完整报错信息如下：

PS D:\ShowCase> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: uglifyjs-webpack-plugin@2.2.0
npm ERR! Found: webpack@5.51.1
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.47.1" from the root project
npm ERR!   peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest@1.0.4
npm ERR!   node_modules/@webpack-cli/configtest
npm ERR!     @webpack-cli/configtest@"^1.0.4" from webpack-cli@4.8.0
npm ERR!     node_modules/webpack-cli
npm ERR!       dev webpack-cli@"^4.7.2" from the root project
npm ERR!       3 more (@webpack-cli/configtest, @webpack-cli/info, @webpack-cli/serve)
npm ERR!   8 more (babel-loader, css-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.0.0" from uglifyjs-webpack-plugin@2.2.0
npm ERR! node_modules/uglifyjs-webpack-plugin
npm ERR!   dev uglifyjs-webpack-plugin@"^2.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@4.46.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^4.0.0" from uglifyjs-webpack-plugin@2.2.0
npm ERR!   node_modules/uglifyjs-webpack-plugin
npm ERR!     dev uglifyjs-webpack-plugin@"^2.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

报错由版本不兼容直接导致：

• 项目根目录声明的webpack开发依赖版本为^5.47.1，实际解析安装版本为5.51.1
• 项目引入的开发依赖uglifyjs-webpack-plugin@2.2.0要求的对等依赖（peer dependency）版本为webpack@"^4.0.0"，二者版本范围无交集，npm 8.x版本默认会对这类对等依赖冲突做强制拦截，导致安装失败。

npm提示的--force、--legacy-peer-deps参数仅能跳过依赖校验强制完成安装，没有解决本质的版本兼容问题，后续构建、运行阶段大概率出现插件调用异常，不推荐作为生产环境的解决方案。

方案1：替换为webpack5兼容的压缩插件（优先推荐） #

uglifyjs-webpack-plugin早已停止维护，webpack5版本已经内置terser-webpack-plugin作为默认的JS压缩工具，不需要额外引入旧版uglify插件，操作步骤：

1. 卸载不兼容的旧插件，执行命令：npm uninstall uglifyjs-webpack-plugin -D
2. 如果需要自定义压缩规则，安装webpack5兼容的terser插件即可，执行命令：npm install terser-webpack-plugin -D
3. 修改webpack配置文件中的插件引入项，将原uglifyjs-webpack-plugin的配置迁移到terser-webpack-plugin，二者配置项相似度极高，几乎不需要改动原有逻辑。

方案2：降级webpack到4.x版本（适合老项目固定版本场景） #

如果项目本身是基于webpack4搭建的老项目，只是误升级了webpack版本，可以回退版本解决冲突：

1. 修改package.json中的版本声明：webpack版本固定为^4.46.0，对应webpack-cli版本调整为^3.3.12
2. 删除项目下的node_modules目录和package-lock.json文件
3. 重新执行npm install即可正常完成依赖解析。

方案3：临时跳过校验（仅适合本地临时调试场景） #

如果只是临时拉取代码做本地验证，不需要做长期项目维护，可以执行npm install --legacy-peer-deps跳过对等依赖校验完成安装，但该方式安装的依赖没有兼容性保障，可能出现构建失败、运行报错的问题，禁止用于生产环境部署。

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