AngularJS + Webpack 适用于开发模式但不适用于生产模式

Question

我正在运行ning webpack-dev-server 开发中，它可以毫无问题地为我的项目服务。如果我在 webpack 配置中使用 mode: "development" 构建项目，则完全没有任何问题。但是当我运行带有 mode: "production" 的 webpack 时，它不起作用。

这是我的 webpack 配置（通用、开发和生产）：

// webpack.common.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');

function resolvePath(dir) {
  return path.join(__dirname, '../', dir);
}

const env = process.env.NODE_ENV || 'development';

module.exports = {
  target: "web",
  entry: {
    vendors: './src/assets/vendors.js',
    bundle: './src/bin/www'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ],
  output: {
    path: resolvePath('dist'),
    filename: '[name].js'
  },
  externals: {
    jquery: "jQuery",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.(html)$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: [':data-src']
          }
        }
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|jpg|jpeg|png|jpg|gif)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[ext]',
        },
      },

      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },

    ],
  },
};

// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-source-map',
  devServer: {
    contentBase: './dist'
  }
});

// webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'production'
});

构建工作正常，但是当我尝试运行浏览器中的代码时，使用 http-server，我可能会遇到下一个错误 - 仅当构建用于生产时，而不是开发！（我正在使用 AngularJS 1.7.2）：

jquery.min.js:2 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.2/$injector/modulerr?p0=taxi4you-console&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.2%2F%24injector%2Funpr%3Fp0%3De%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A7%3A168%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A46%3A215%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A43%3A433)%0A%20%20%20%20at%20e%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A44%3A171)%0A%20%20%20%20at%20Object.invoke%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A44%3A256)%0A%20%20%20%20at%20d%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A42%3A407)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A43%3A19%0A%20%20%20%20at%20q%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A8%3A76)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A42%3A308)%0A%20%20%20%20at%20hb%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.2%2Fangular.min.js%3A46%3A401)
    at angular.js:99
    at angular.js:5027
    at q (angular.js:387)
    at g (angular.js:4987)
    at hb (angular.js:4904)
    at c (angular.js:1936)
    at Vc (angular.js:1957)
    at ye (angular.js:1842)
    at HTMLDocument.<anonymous> (angular.js:35431)
    at l (jquery.min.js:2)

我从 webpack 收到警告说我的包太大了。也许这就是问题所在？

Answer 1

您遇到的问题是缩小过程正在缩小 angular 对象的 DI 名称。当发生这种情况并且 angularjs 尝试加载注入的对象时，它无法追踪依赖项，因为名称已被破坏。

为了避免这种情况，您应该使用 babel-plugin-angularjs-annotate 插件。此插件可确保您的 ngInject 语句不会被破坏。

AngularJS + Webpack 适用于开发模式但不适用于生产模式

AngularJS + Webpack works on development mode but not on production mode

bundle

angularjs

webpack