Vue 2使用Terser压缩JS文件失败，求教Webpack运行方法

一、如何运行Webpack #

Webpack的运行方式主要分两种，推荐使用本地依赖的方式：

• 在项目根目录的package.json中添加scripts命令：
  在scripts字段里加入 "build": "webpack --mode production"，之后在终端执行npm run build（或yarn build）即可触发构建。
• 若已全局安装Webpack，可直接在终端执行webpack --mode production，但全局版本易和项目依赖版本冲突，不推荐。

二、排查Terser Plugin v4.2.3压缩失效问题 #

Webpack v4在production模式下默认会启用Terser压缩，但手动配置时需注意以下要点：

正确的webpack.config.js配置示例 #

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // 核心：必须设置为production模式，development模式会自动禁用压缩
  mode: 'production',
  optimization: {
    // 显式开启压缩（production模式下默认是true，手动配置可确保生效）
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          // 可选：自定义压缩规则
          compress: {
            drop_console: true, // 移除代码中的console语句
          },
          mangle: true, // 启用变量名混淆
        },
      }),
    ],
  },
  // 基础配置：根据你的项目调整入口和输出
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
};

常见失效原因 #

• 未设置mode: 'production'：development模式下Webpack会跳过压缩逻辑，无论是否配置Terser都不会生效。
• optimization.minimize被设为false：手动关闭了压缩开关，需确保该值为true。
• 版本不兼容：terser-webpack-plugin v4.2.3仅适配Webpack v4，若你项目用的是Webpack v5，需要升级到terser-webpack-plugin v5及以上版本。
• 运行命令未指定mode：若scripts里没写--mode production，需在终端执行webpack --mode production，否则默认是development模式。

三、验证步骤 #

1. 检查package.json的依赖和scripts：

   {
     "scripts": {
       "build": "webpack --mode production"
     },
     "devDependencies": {
       "webpack": "^4.46.0",
       "webpack-cli": "^3.3.12",
       "terser-webpack-plugin": "^4.2.3"
     }
   }
   

2. 执行npm install确保依赖安装完整。
3. 执行npm run build触发构建。
4. 打开dist/bundle.js，若代码紧凑、变量名被简化、无多余注释，则压缩生效。

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