javascript - Webpack 和 angular 1 uglify 插件

Question

当我使用 uglify js 插件时，我遇到了无法实例化模块的错误； 当我不包含任何插件时它工作得很好，我怎样才能缩小它以用于生产？ 这是我的 webpack 配置:

const webpack = require('webpack');

module.exports = {
    entry: './src/app.js',
    vendor: ['angular'],
    output: {
        path: './dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ],
    watch: true
};

我的 app.js:

var angular = require('angular');
require('angular-ui-router');
global.jQuery = require('jquery');
require('bootstrap');
require("./css/style.css");

angular.module('todoApp', ['ui.router']).config(require('./routes'));

require('./services/todoService');

require('./controllers/mainController');
require('./controllers/homeController');
require('./controllers/aboutController');

Answer 1

据推测，您没有关注 dependency injection guide关于依赖注释。 您有几个选择:

1. 在 controllers/mainController 中，指定 mainController.$inject = ['$scope', '$http'];(根据需要进行调整)。
2. 使用ng-annotate-loader .根据您的代码风格，您可能必须使用 /*@ngInject*/
注释构造函数

为了在开发时不错过依赖注解，您可能需要启用 strict dependency injection .