AngularJS + Webpack適用於開發模式，但不適用於生產模式

Question

我正在開發中運行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服務器在瀏覽器中運行代碼時，下一個錯誤-僅當構建用於生產而非開發時才出現！ （我正在使用AngularJS 1.7.2）：

jquery.min.js：2未捕獲的錯誤：[$ 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％20at20at％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％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

您遇到的問題是您的縮小過程正在縮小角度對象的DI名稱。 發生這種情況並且angularjs嘗試加載注入的對象時，由於名稱已被修改，因此無法跟蹤依賴項。

為了避免這種情況，您應該使用babel-plugin-angularjs-annotate插件。 該插件可確保您的ngInject語句不被ngInject 。