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?

Answer 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

Answer 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