webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决

问题

一个angularjs1.x的历史项目，webpack3做的打包，打出来的包一起有几十M，因为一直内网运行，虽然包大了点，但是还能够接受。

因为最近有一些客户对这个项目很感兴趣，就拿去演示，这就不能忍受了，然后受命去看看是什么问题。

在package.json的scripts中，是做了压缩代码脚本的，问了之前项目的同事说是压缩脚本出来的代码有部分页面是跑不起来的。so，就测试了一波，发现是Angular $injector:unpr Unknown provider错误。

原因

某些祖传代码在写的时候不规范，对$scope没有使用依赖注入的写法。

不规范的写法

app.controller('BadController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
});

依赖注入的写法

//使用了详细的注释，数组形式注入
app.controller('GoodController1', ['$scope', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
}]

以上两种写法在不使用JavaScript构件工具的时候是没有问题的，使用类似webpack压缩打包的时候，对代码做了很多压缩混淆的处理，不规范写法中的$scope通过名字就匹配不到需要注入的参数了，所以就杯具了。

问题找到了，怎么解决呢，那么多代码难道一个一个改过去？？？

解决

webpack 配置中使用了UglifyJsPlugin这个工具对JavaScript代码做了压缩和混淆处理，然后UglifyJsPlugin的文档告诉我们，它有个配置参数叫mangle，是用来处理混淆的，更妙的是mangle有个选项叫reserved，可以用一个数组来设置可以不被混淆的变量名。

这里用的是webpack3.x，使用webpack4.x的小伙伴，要注意下，4.x 中的压缩混淆工具已经换了

然后就有了下面这一段配置，问题就被解决了。

uglifyOptions: {
    mangle: {
        reserved: [
            "$scope",
            "scope",
        ],
    },
    compress: {
        warnings: false,
        drop_console: true,
    },
    output: {
        comments: false,
    },
},

附

mangle 用于混淆属性/指定压缩配，下表是mangle的可配置项列表

属性	作用
builtins	混淆那些与标准JS全局变量重复的名字。
debug	添加debug前缀和后缀。
domprops	混淆那些与DOM属性名重复的名字
keep_quoted	只混淆没有被引号包起来的属性名
regex	只混淆匹配（该正则）的名字
reserved	不需要混淆的名字的列表（即保留）

<完结>