如果设置为 true，Webpack 最小化选项会中断应用程序答案

【问题标题】：Webpack minimize option breaks application if set to true如果设置为 true，Webpack 最小化选项会中断应用程序
【发布时间】：2020-07-01 13:01:54
【问题描述】：

我遇到了一个关于 webpack 的问题：如果我设置 config.optimization.minimize: false，webpack 会生成未缩小的捆绑文件（polyfills、供应商和应用程序），然后我运行服务器并且一切正常。如果我将选项更改为config.optimization.minimize: false，我会收到以下 AngularJS (1.7.9) 错误：

jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to instantiate module saServer2App due to:
Error: [$injector:modulerr] Failed to instantiate module saServer2App.account due to:
Error: [$injector:unpr] Unknown provider: e


https://errors.angularjs.org/1.7.9/$injector/modulerr?p0=saServer2App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20saServer2App.account%20due%20to%3A%0AError%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20e%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.9%2F%24injector%2Fmodulerr%3Fp0%3DsaServer2App.account%26p1%3DError%253A%2520%255B%2524injector%253Aunpr%255D%2520Unknown%2520provider%253A%2520e%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.9%252F%2524injector%252Funpr%253Fp0%253De%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A837%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A23977%250A%2520%2520%2520%2520at%2520u%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25576)%250A%2520%2520%2520%2520at%2520s%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25881)%250A%2520%2520%2520%2520at%2520Object.invoke%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25969)%250A%2520%2520%2520%2520at%2520r%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25365)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A25009%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24955%250A%2520%2520%2520%2520at%2520x%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A1529)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24869)%250A%2520%2520%2520%2520at%2520We%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A24189)%250A%2520%2520%2520%2520at%2520i%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10341)%250A%2520%2520%2520%2520at%2520Object.Et%2520%255Bas%2520bootstrap%255D%2520(http%253A%252F%252Flocalhost%253A9000%252Fvendor.bundle.js%253A7%253A10656)%250A%2520%2520%2520%2520at%2520HTMLDocument.%253Canonymous%253E%2520(http%253A%252F%252Flocalhost%253A9000%252Fapp.bundle.js%253A348%253A233259)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30005)%250A%2520%2520%2520%2520at%2520t%2520(http%253A%252F%252Flocalhost%253A9000%252Flibs%252Fjquery.min.js%253A2%253A30307)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A837%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A25194%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24955%0A%20%20%20%20at%20x%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A1529)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24869)%0A%20%20%20%20at%20We%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A24189)%0A%20%20%20%20at%20i%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10341)%0A%20%20%20%20at%20Object.Et%20%5Bas%20bootstrap%5D%20(http%3A%2F%2Flocalhost%3A9000%2Fvendor.bundle.js%3A7%3A10656)%0A%20%20%20%20at%20HTMLDocument.%3Canonymous%3E%20(http%3A%2F%2Flocalhost%3A9000%2Fapp.bundle.js%3A348%3A233259)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30005)%0A%20%20%20%20at%20t%20(http%3A%2F%2Flocalhost%3A9000%2Flibs%2Fjquery.min.js%3A2%3A30307)
    at vendor.6729935a0c85787ce014.bundle.js:895
    at vendor.6729935a0c85787ce014.bundle.js:5819
    at x (vendor.6729935a0c85787ce014.bundle.js:1144)
    at g (vendor.6729935a0c85787ce014.bundle.js:5779)
    at We (vendor.6729935a0c85787ce014.bundle.js:5696)
    at i (vendor.6729935a0c85787ce014.bundle.js:2719)
    at Object.Et [as bootstrap] (vendor.6729935a0c85787ce014.bundle.js:2740)
    at HTMLDocument.<anonymous> (app.js:74)
    at e (jquery.min.js:2)
    at t (jquery.min.js:2)

这有点奇怪，尤其是对我来说，我是 AngularJS 和 Webpack 的新手。我在这两种情况之间唯一改变的只是minimize 标志。有什么问题？

随时询问我需要的文件/代码的某些部分。

【问题讨论】：

标签： javascript angularjs webpack

【解决方案1】：

AngularJs 依赖注入基于函数参数名称。例如：

class AuthService {
  constructor(otherService) {
  // ------------^ will inject otherService
  }
}

angular.module('my-app', []).service('authService', AuthService);

问题在于，当您缩小代码时，缩小器会将函数参数替换为更短的参数（通常是一个字符）。这就是你的情况，这解释了为什么 Angular 会尝试注入 e (Error: [$injector:unpr] Unknown provider: e)。

为了解决这个问题，Angular 支持array notation，它将依赖项定义为字符串。

// Given
const MyController = function (obfuscatedScope, obfuscatedRoute) {
  // ...
};

// Define function dependencies
MyController['$inject'] = ['$scope', '$route'];

有一个自动注释的 webpack 插件，ng-annotate-webpack-plugin。

它可以处理大多数情况，但有时您需要通过添加特殊注释来帮助它。

class AuthService {
  /* @ngInject */
  constructor(otherService) {
  // ------------^ will inject otherService
  }
}

angular.module('my-app', []).service('authService', AuthService);

如果你是 babel 用户，请查看babel plugin。

【讨论】：