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']
        }
      }
    ]
  }
};

我的问题是，没有缩小，应用程序运行正常。当我缩小应用程序和供应商时，它似乎无法工作。我收到了未知的提供商错误我看过关于修剪的问题，但这似乎也没有解决我的问题（除非我没有正确处理）。我也在所有正确的地方做ngInject。我发现这个配置snippit放在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

不能把它作为评论，因为我的声誉较少。

您可以使用strict-di而不是ng-annotate。解决strict-di报告的所有问题，然后使用缩减进行修改。

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

Webpack + angular 1.x + gulp + minifying

1 个答案: