Patrick McDermott
Patrick McDermott

Reputation: 1220

Config continues to uglify js even after removing uglify configuration

Using webpack 4 I have deployed to production, and one of the pages an error displays in console:

Error: [$injector:unpr] http://errors.angularjs.org/1.6.10/$injector/unpr?p0=eProvider%20%3C-%20e

And in the angular documents displays

Unknown provider: eProvider <- e

People say this message is down to Uglifying your script, and causes this unhelpful error message. So I removed the Uglify config from webpack.prod.js and the script continues to be uglified, thus the console still providing me with this unhelpful error.

I'll post both my webpack.common.js and webpack.prod.js below so you can have a look, but I'm 90% certain there is no configuration left that would uglify the scripts?

Question

How do I stop the uglifying so I can see where the error orginates from in the console?

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')
    })    
    ]
});

Upvotes: 0

Views: 180

Answers (2)

Patrick McDermott
Patrick McDermott

Reputation: 1220

For anyone wanting to know what I did to disable uglifying, based on jumoel's answer, I added this to my config:

webpack.common.js

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

Upvotes: 0

jumoel
jumoel

Reputation: 1790

You have enabled the production mode in Webpack. This enables the UglifyJS plugin automatically:

production

Provides process.env.NODE_ENV with value production. Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin and UglifyJsPlugin.

To disable minifying, either set the mode to development or override the optimization.minimize and/or optimization.minimizer options.

Upvotes: 1

Related Questions