uglifyjs not minifying the files (Webpack)

Question

I have been trying to use uglify option using webpack, but my resultant page's size remains the same without minification.I tried the following things,

webpack.config

 var webpack = require('webpack'); const Uglify = require("uglifyjs-webpack-plugin"); module.exports = { entry: __dirname + '/app/index.js', module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, output: { filename: 'whattoname.js', path: __dirname + '/build' }, plugins: [ new Uglify() ] }; 

1. I tried to set the mode to production
2. Ran the build using webpack -p command
3. Also with --optimize-minimizer command

The end file's size remains the same. Am I missing something here?

Answer 1

I had a similar issue, to resolve the problem I would suggest moving across to the inbuilt webpack uglifier as seen in the following example (no uglifier dependancy required):

var webpack = require('webpack');

module.exports = {
    entry: __dirname + '/app/index.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    output: {
        filename: 'whattoname.js',
        path: __dirname + '/build'
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            minimize: true
         })
    ]
};

If this does not resolve your issue I suggest several actions:

• clean out your dist and recompile to insure the file is actually writing to dist

• Inspect the dist code, to check if it appears uglified. It is possible your project was already uglifying the file somewhere else, which would mean the file size after uglification does not change

• Adding the include: /\\.js$/ field to your webpack.optimize.UglifyJsPlugin to specify precisely the targeted files

As for what caused this issue. I would suggest reading this comments posted here