Question

使用webpack 4我已部署到生产环境，其中一个页面在控制台中显示错误：

错误：[$ injector：unpr] http://errors.angularjs.org/1.6.10/ $注射器/ unpr？P0 = eProvider％20％3 C-％20E

并在角度文档中显示

未知提供者：eProvider＆lt; - e

人们说这条消息归咎于丑化您的脚本，并导致这个无用的错误消息。所以我从webpack.prod.js中删除了Uglify配置，脚本继续被修改，因此控制台仍然向我提供了这个无用的错误。

我会在下面发布我的webpack.common.js和webpack.prod.js以便您查看，但我90％确定没有任何配置可以解释脚本吗？

问题

如何停止uglifying，以便我可以在控制台中看到错误的来源？

webpack.common.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  devtool: "source-map",
  entry: {
    vendor: './src/js/vendor.js',   
    app: './src/js/index.js',
    style: './src/scss/main.scss'
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: '[name].bundle.js'
  },
  resolve: {
    alias: {
      localScripts: path.resolve(__dirname, 'assets'),
      app: path.resolve(__dirname, 'app'),
    }
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
            'file-loader',
            {
              loader: 'image-webpack-loader',
              options: {
                bypassOnDebug: true,
              },
            },            
        ]
      }, 
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { url: false, sourceMap: true } }
        ]
      },      
      {
        test: /\.scss$/,
        include: [
          path.resolve(__dirname, "./src/scss")
        ],
        // exclude: [
        //   path.resolve(__dirname, "node_modules")
        // ],        
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          { 
            loader: 'css-loader', 
            options: { 
              url: false, sourceMap: true 
            } 
          },
          { 
            loader: 'sass-loader', 
            options: { 
              sourceMap: true 
            } 
          }
        ]
      },
      { 
        test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        loader: 'url-loader?limit=100000' 
      }
    ]
  },
  // cache: false,
  plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }),  
    new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/), //needed for bug in moment
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      inject: false,
      title: 'Patent Place',
      template: 'index.htm'

    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()      
  ]
}

webpack.prod.js

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new MiniCssExtractPlugin({
      sourceMap: true,
      filename: "main.css"
    }),
    //new UglifyJsPlugin({
      //sourceMap: true,
      //test: /\.js($|\?)/i,
    //}),
    new OptimizeCSSAssetsPlugin({
      cssProcessorOptions: {
        map: {
          inline: true
        }
      }
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })    
    ]
});

Answer 1

您已在Webpack中启用production模式。 This enables the UglifyJS plugin automatically：

<强>生产

为process.env.NODE_ENV提供值production。启用FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和 UglifyJsPlugin 。

要停用缩小功能，请将mode设置为development或覆盖optimization.minimize和/或optimization.minimizer选项。

Answer 2

对于想要知道我做了什么来禁用uglifying的人，根据jumoel的回答，我将其添加到我的配置中：

webpack.common.js

module.exports = {
  devtool: "source-map",
  optimization: {
      minimize: false
  }

在删除uglify配置后，Config继续uglify js

2 个答案: