webpack5运行npm run dev报compiler.plugin is not a function错误怎么解决

你遇到的报错是webpack版本与uglifyjs-webpack-plugin版本不兼容导致的：

• 你当前使用的webpack 5已经彻底移除了旧版compiler.plugin API，而你安装的uglifyjs-webpack-plugin@1.x是适配webpack 3/4的老版本插件，内部调用了已废弃的API，所以启动时抛出类型错误。
• 另外uglifyjs-webpack-plugin早已停止维护，不支持ES6+语法压缩，webpack 5已经内置了基于Terser的JS压缩能力，完全不需要额外安装该插件。

第一步：移除冗余的压缩插件配置 #

开发环境（mode: development）不需要压缩代码，压缩不仅会拖慢编译、热更新速度，也完全没有使用必要。直接删除webpack.config.js plugins数组中的new UglifyJsPlugin()代码，同时卸载该依赖：

npm uninstall uglifyjs-webpack-plugin -D

生产环境（mode: production）下webpack 5默认会自动开启JS、CSS压缩能力，不需要额外配置插件即可正常使用。
如果有自定义压缩规则的需求（比如生产环境移除console），直接使用webpack内置的TerserPlugin配置即可，不需要安装额外依赖：

// webpack.config.js
module.exports = {
  // 其余配置保持不变
  optimization: {
    minimizer: [
      `...`, // 保留webpack默认的其他压缩配置
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
}

第二步（可选）：修复devServer废弃配置 #

你当前使用的webpack-dev-server 4.x已经废弃了v3版本的contentBase、inline配置，修改devServer配置可避免启动警告：

devServer:{
  static: './dist', // 替换原来的contentBase
  // 删掉inline配置，v4默认开启inline模式
}

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