升级Webpack 4遇UglifyJsPlugin报错，求助解决方法

核心原因分析 #

你遇到的问题大概率不是自己的配置直接导致的——即使你移除了UglifyJsPlugin，项目中**某个依赖的内部配置、或者其他拆分的webpack配置文件（比如公共/base配置）**还在调用这个已被移除的插件，所以报错依然存在。

另外要明确：Webpack 4的生产模式(mode: 'production')默认已经开启代码压缩，不需要手动配置optimization.minimize；只有当你需要自定义压缩规则时才需要手动配置，而且Webpack 4官方已不再推荐使用UglifyJsPlugin，转而推荐terser-webpack-plugin（支持ES6+语法压缩，性能更优）。

具体解决步骤 #

步骤1：彻底清理项目中所有旧的UglifyJsPlugin引用 #

• 检查所有webpack配置文件（比如webpack.common.js、webpack.dev.js、webpack.production.config.js），确保没有const UglifyJsPlugin = require('uglifyjs-webpack-plugin')这类导入语句，也没有在plugins数组里实例化它。
• 检查项目的package.json，如果有uglifyjs-webpack-plugin依赖，先卸载它：

  npm uninstall uglifyjs-webpack-plugin --save-dev
  

步骤2：替换为官方推荐的TerserWebpackPlugin（如需自定义压缩） #

如果你确实需要自定义压缩规则（比如开启缓存、并行压缩、保留sourceMap），请使用terser-webpack-plugin：

1. 安装依赖：

   npm install terser-webpack-plugin --save-dev
   

2. 在你的webpack.production.config.js中配置：

   const TerserPlugin = require('terser-webpack-plugin');
   
   module.exports = {
     mode: 'production', // 必须设置为production，默认开启压缩
     optimization: {
       minimizer: [
         new TerserPlugin({
           cache: true,
           parallel: true,
           sourceMap: true, // 如需sourceMap请开启
           terserOptions: {
             // 可添加自定义压缩规则，比如删除console.log
             compress: {
               drop_console: true
             }
           }
         })
       ]
     },
     // 其他配置...
     entry: [/* 你的入口文件 */]
   }
   

步骤3：检查依赖是否存在旧版webpack配置 #

如果以上步骤做完仍报错，可能是某个第三方依赖内部在使用旧的UglifyJsPlugin：

• 用以下命令查看哪个依赖引入了它：

  npm ls uglifyjs-webpack-plugin
  

• 找到对应依赖后，尝试升级该依赖到支持Webpack 4的版本；若无法升级，可使用webpack-chain或webpack-merge覆盖依赖的旧配置。

步骤4：验证配置是否生效 #

运行生产构建命令，比如：

npm run build

如果不再出现webpack.optimize.UglifyJsPlugin已被移除的报错，说明问题解决。

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