webpack 4 uglifyjs not minifying and compressing

Question

I am using webpack 4 and I am unsure if my code is being compressed and minified. I am using React as well.

My first problem is using the Webpack UglifyJS plugin in the webpack plugin property or the optimization property. When I use the plugin property it seems to compress at least but not to a single line. I am still unsure if it is minifying. When I use optimization it does not even compress. When I take a look at my bundled js file, it seems to be bundling things in node_modules such as webpack.

//works with plugin

module.exports = {
    ...
    plugins: [new UglifyJsPlugin({
        test: /\.js$/,
        exclude: /node_modules/,
        sourceMap: true,
        uglifyOptions: {
            compress: {},
            mangle: true,
        }
}],

//does not work with optimization

module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [new UglifyJsPlugin({
            test: /\.js$/,
            exclude: /node_modules/,
            sourceMap: true,
            uglifyOptions: {
                compress: {},
                mangle: true,
             }
       }],
    }

With the first example, the code gets compressed at least but not into one single line.

//Example

!*** ./node_modules/scheduler/index.js ***!
  \*****************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {} else {\n...

 !*** ./node_modules/scheduler/tracing.js ***!
  \*******************************************/
/*! no static exports found */function(module,exports,__webpack_require__){"use strict";eval('\n\nif (false) {...

Also not sure if it being minified. I wrote a function in my React Component

someFunc(one, two) {
    return one + two
}

According to the npm uglifyjs docs, this should be minified into

someFunc(a, b) { \n return a+b\n}

but it is being output as

someFunc(one, two) { \n return one + two\n}

Is this minifying?

Solution 1

Webpack 4 does optimization and minification by default in production mode.

So if my guess is right, your configuration is development configuration.

You can remove your explicit UglifyJsPlugin definition and set the mode to production and Webpack will take care of everything.

mode: 'production',
plugins: [...],
optimization: ...

You can customize your optimizations though if you must. But setting the mode to production will yield you your expected results.

More info here

Webpack 4 mode usage

Solution 2

I was also facing the same issue. It started working after providing mode config value as production.

module.exports = {
    // webpack config
    mode: process.env.NODE_ENV || 'development',
};

// command NODE_ENV=production webpack

Comments

[henhen]

Yes, I just found that out as well. Thanks you

[Dinesh Pandiyan]

@henhen If this answer helped you solve your problem, mark it as accepted answer. It will help others who stumble across similar problems.

[henhen]

Okay thanks. But my original questions were still not answered. Since the option to use webpack uglifyJS exists and can be used with the optimization property, I don't see or am unsure if it is minifying or why its not being compressed.

[rfc1484]

In my case to see any difference in build size I had to also add uglifyJS under webpack plugins entry: plugins: [new UglifyJsPlugin()] This does not seem documented but only doing the optimization entry part did not reflect any changes in build size, I had to do both of them.