Webpack中UglifyJS无法压缩文件问题咨询

嘿，我看了你遇到的问题——配置了Uglify插件、开了production mode、试了各种命令，但代码就是没被压缩，大小纹丝不动。这情况我也碰到过，咱们一步步来排查：

1. 插件版本不兼容是重灾区 #

你用的uglifyjs-webpack-plugin在Webpack 4+之后其实已经被官方弃用了，取而代之的是内置的TerserPlugin。而且UglifyJS本身不支持ES6+语法，如果你的代码经过Babel转译后还留着ES6特性，它可能直接跳过压缩（甚至不报错，悄咪咪失效）。

解决办法：

• 直接删掉uglifyjs-webpack-plugin依赖，Webpack在production模式下会自动启用TerserPlugin来压缩代码
• 要是你非得用Uglify，得注意版本匹配：Webpack 4对应uglifyjs-webpack-plugin@1.x，Webpack 5就别折腾它了

2. Production Mode的默认配置别乱踩 #

当你设置mode: 'production'时，Webpack已经帮你开了压缩、树摇（tree shaking）等优化，如果你手动加了Uglify插件，反而可能和内置的压缩逻辑冲突。而且webpack -p在Webpack 4+里等价于--mode production，你同时用-p和--optimize-minimizer等于重复配置，容易出问题。

先检查你的配置里有没有明确写mode：

module.exports = {
  mode: 'production', // 要么写在这里，要么命令行用--mode production，二选一就行
  // ... 其他配置
};

3. Babel配置可能拖后腿 #

如果你的Babel没把代码转译成Uglify能处理的语法，压缩也会失效。比如用@babel/preset-env但没设置目标环境，输出的代码可能还有ES6箭头函数、解构这些Uglify不认的东西。

看看你的.babelrc或者babel-loader配置是不是这样：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ]
}

4. 插件注册有没有写错 #

有时候就是拼写或者导入的小问题，比如你写的const Uglify = require("uglifyjs-webpack-plugin");，其实正确的插件名称是UglifyJsPlugin（注意大小写），虽然别名能用，但容易搞混。确认插件已经正确安装：

npm install uglifyjs-webpack-plugin --save-dev

然后正确注册：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// ...
plugins: [new UglifyJsPlugin()]

5. 看看构建日志的提示 #

运行构建命令时，别光看文件大小，看看终端输出里有没有[UglifyJsPlugin]相关的日志，或者有没有隐藏的错误。可以加个参数看优化是否生效：

webpack --mode production --display-optimization-bailout

最后给个最优方案 #

其实最简单的就是别手动加Uglify插件了：

1. 卸载uglifyjs-webpack-plugin
2. 在webpack.config.js里明确写mode: 'production'
3. 直接运行webpack命令，不用加-p或者--optimize-minimizer

这样Webpack会自动用内置的TerserPlugin帮你压缩、混淆代码，文件大小肯定会降下来的。

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