移除Uglify配置后Webpack 4仍压缩JS，如何停止压缩排查Angular错误？

我完全懂你现在的头疼之处——明明注释掉了UglifyJsPlugin，生产环境打包后的代码还是被压缩，导致Angular的依赖注入错误提示变成了eProvider <- e这种完全看不懂的变量名，根本没法定位到底是哪个服务或控制器出了问题。

其实这是Webpack 4的默认行为在搞鬼：当你设置mode: 'production'时，Webpack会自动启用一套生产环境优化插件，其中就包含内置的代码压缩逻辑，这就是为什么你自己配置的Uglify插件注释掉后，代码依然被压缩的原因。

下面给你两种快速解决的方案，帮你停止代码压缩，拿到真实的错误提示：

方案一：临时切换到development模式（最快捷） #

直接把webpack.prod.js里的mode从production改成development：

module.exports = merge(common, {
  mode: 'development', // 修改这里
  devtool: 'source-map',
  // ... 其他原有配置
});

这样Webpack会禁用所有生产环境的默认优化，代码会保留原本的变量名和结构，控制台里的Angular错误提示就会显示真实的依赖名称，你就能一眼看出哪里注入出了问题。

方案二：保留production模式但关闭默认压缩 #

如果你不想完全切换开发模式，只想关闭压缩功能，可以通过optimization.minimize手动禁用默认的压缩插件：

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  // 新增这部分配置
  optimization: {
    minimize: false, // 关闭默认代码压缩
  },
  // ... 其他原有插件配置
});

这种方式既能保留production模式下的其他配置（比如DefinePlugin设置的环境变量），又能让代码不被压缩，方便你定位错误。

额外建议：解决Angular压缩问题的根本方案 #

等你定位到错误并修复后，其实不用一直关闭压缩，Angular有两种标准方式解决压缩后的依赖注入问题：

• 数组式注入语法：把原来的注入写法改成数组形式，明确声明依赖名称，比如：

  // 原来的写法（压缩后会失效）
  app.controller('MyController', function($scope, UserService) { /* ... */ });
  // 修改后的写法（压缩后依然有效）
  app.controller('MyController', ['$scope', 'UserService', function($scope, UserService) { /* ... */ }]);
  

• 使用ng-annotate自动处理：通过Webpack的ng-annotate-loader插件，自动给Angular代码添加依赖注入注释，这样即使代码被压缩，Angular也能正确识别依赖。

这里给你附上修改后的webpack.prod.js示例（方案二的配置）：

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const common = require('./webpack.common.js'); 
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); 

module.exports = merge(common, { 
  mode: 'production', 
  devtool: 'source-map',
  optimization: {
    minimize: false, // 关闭默认代码压缩
  },
  plugins: [ 
    new MiniCssExtractPlugin({ 
      sourceMap: true, 
      filename: "main.css" 
    }), 
    // 已注释自定义Uglify插件
    // new UglifyJsPlugin({ 
    //   sourceMap: true, 
    //   test: /\.js($|\?)/i, 
    // }), 
    new OptimizeCSSAssetsPlugin({ 
      cssProcessorOptions: { 
        map: { inline: true } 
      } 
    }), 
    new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
    }) 
  ] 
});

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