Webpack + angular 1.x + gulp + minifying

Question

我在设置 Webpack 以正确缩小我的应用时遇到问题。我正在创建以分隔 JS 文件，一个 vendor.js（库）和 main.js（我的应用程序）。我已经查看并搜索了我的问题，但似乎找不到合适的解决方案。

webpack.config.js

var webpack = require("webpack");
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');

let vendors = [
  'angular',
  'lodash',
  'moment',
  'angular-ui-router',
  'angular-loading-bar',
  'angular-filter',
  'angular-animate'
];

module.exports = {
  entry: {
    app: './halo/app.js',
    vendor: vendors
  },
  output: {
    filename: './build/main.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      filename:"./build/vendor.js"
    }),
    new ngAnnotatePlugin({
      add: true
    }),
    new webpack.optimize.UglifyJsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      }
    ]
  }
};

我的问题是，在没有缩小的情况下，该应用程序运行良好。当我缩小应用程序和供应商时，它似乎不起作用。我收到未知的提供程序错误。
我已经阅读了有关 mangling 的信息，但这似乎也不能解决我的问题（除非我做得不好）。我也在所有正确的地方做 ngInject。
我发现这个配置片段可以放入 optimize.UglifyJsPlugin({})

{
  beautify: false, // Don't beautify output
  comments: false, // Eliminate comments
  // Compression specific options
  compress: {
    warnings: false,
    drop_console: true
  },
  mangle: {
    except: ['$'], // Don't mangle $
    screw_ie8 : true, // Don't care about IE8
    keep_fnames: true // Don't mangle function names
  }
}

有人能解释一下吗？

Answer 1

不能把它称为cmets，因为我的声誉较低。

您可以做的是，使用strict-di 而不是ng-annotate。解决strict-di 报告的所有问题，然后使用 minification 和 mangling。

strict-di 强制您在代码中以数组格式定义所有依赖项。 read this answer about it