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

我在开发中运行webpack dev server,它为我的项目服务没有任何问题。如果我使用 mode: "development" 在webpack配置中,没有任何问题。 但是当我用 mode: "production" 它不起作用。

// 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服务器运行代码时,我可以出现下一个错误-仅当构建用于生产,而不是开发时!(我使用的是AngularJS 1.7.2):

jquery.min.js:2未捕获错误:[$喷油器:模块R] 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)

我收到网页包的警告说我的包裹太大了。也许这就是问题所在?