AngularJS + Webpack работает в режиме разработки, но не в рабочем режиме - PullRequest
Новая
       12

AngularJS + Webpack работает в режиме разработки, но не в рабочем режиме

0 голосов
/ 01 июля 2019

Я использую webpack-dev-server в разработке, и он без проблем обслуживает мой проект.Если я строю проект, используя mode: "development" в конфиге webpack, то никаких проблем не возникает.Но когда я запускаю веб-пакет с mode: "production", он не работает.

Это мои настройки веб-пакета (common, dev и prod): 

// 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 Uncaught Error: [$ инжектор: 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)

Я получил предупреждение от веб-пакета, что мой пакет слишком большой.Может в этом проблема?

1 Ответ

2 голосов
/ 02 июля 2019

Проблема, с которой вы столкнулись, заключается в том, что ваш процесс минимизации минимизирует имена DI для угловых объектов.Когда это происходит и angularjs пытается загрузить внедренный объект, он не может отследить зависимости, так как имена были искажены.

Чтобы избежать этого, вы должны использовать babel-plugin-angularjs-annotate плагин.Этот плагин гарантирует, что ваши ngInject операторы не искажены.

...