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%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

您遇到的问题是，您的缩小过程正在缩小角度对象的DI名称。当这种情况发生并且angularjs尝试加载注入的对象时，由于名称已被修改，因此无法跟踪依赖关系。

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

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

1 个答案: