plugin is not working in Webpack with React JS

Question

I am creating a React JS app. I have installed terser-webpack-plugin to both try to compress my code as well as remove console.log() statements. However, it does not seem to be working.

I have installed the terser-webpack-plugin as follows:

npm install terser-webpack-plugin --save-dev

My webpack.config.js file looks like this:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [
                "@babel/plugin-syntax-dynamic-import"
            ]
          }
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
                terserOptions: {
                        extractComments: 'all',
                        compress: {
                                drop_console: true
                        },

                }
        })
    ],
  },
  devtool: 'eval-source-map',
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new CopyPlugin([
      { from: 'src/css', to: 'css' }
    ])
  ]
};

However, when I run npm run build or npm run dev it does not seem to have any effect on the final file size and the comments are still there. What am I doing wrong?

As a side note, I am wondering how to make sure this only works for build and does not remove the comments on dev.

winwiz1 · Accepted Answer · 2019-09-07 02:52:32Z

3

Using

optimization: {
    minimize: true,

tells webpack to create and use an instance of TerserPlugin with some default configuration options. Then you create another instance of the plugin:

new TerserPlugin({

It is better not to use minimize: true,

This configuration works:

...(isProduction && {
        minimizer: [
          new TerserPlugin({
            cache: false,
            parallel: true,
            sourceMap: false,     // set to true if debugging of production build needed
            terserOptions: {
              keep_classnames: false,
              mangle: true,
              compress: false,
              keep_fnames: false,
              output: {
                comments: false,
              }
            }
          })
        ]
      }),

I am wondering how to make sure this only works for build and does not remove the comments on dev.

Note how the boolean flag isProduction is used in the above code snippet. The flag is defined as follows:

const isProduction = (env && env.prod) ? true : false;

To make the flag work you call webpack as webpack in dev and webpack --env.prod for production build.

For the reference, the above code snippet is taken from here

answered Sep 7, 2019 at 2:52

winwiz1

3,19214 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kojow7 Over a year ago

I have tracked down the issue to be the line devtool: 'eval-source-map' which seems to have been preventing the TerserPlugin from having any effect. I have implemented some of your suggestions in my final code as you can see in the answer I posted above.

kojow7 Over a year ago

One thing I was unclear on is how the minimizer property knows to use the TerserPlugin when we aren't naming what the name of the plugin is?

winwiz1 Over a year ago

webpack doco: "optimization.minimize boolean Tell webpack to minimize the bundle using the TerserPlugin". I guess webpack has TerserPlugin hardcoded and ready to kick into action when this boolean flag is set to 'true'.

Taehyun Hwang · Accepted Answer · 2022-05-06 17:58:09Z

0

You probably check your build file's extension! I'm struggling with this problem and solved it by adding test regex property to .js (default is .mjs)

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, // you should add this property
        terserOptions: {
          compress: {
            drop_console: true,
            drop_debugger: true,
            pure_funcs: ['console.log', 'console.info'], // Delete console
          },
        },
      }),
    ],
  },

answered May 6, 2022 at 17:58

Taehyun Hwang

2601 gold badge2 silver badges10 bronze badges

Comments

kojow7 · Accepted Answer · 2019-09-07 05:30:29Z

I discovered that the line devtool: 'eval-source-map', was preventing TerserPlugin from working. So, I have eliminated it from production. I have used winwiz1's example and modified it to fit my situation.

Something to note is that my package.json was using the following:

"scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
}

So, rather than using my own environment variables I am using the mode parameter.

To use environment variables or parameters in webpack you need to modify it so that it is a function. See changes marked with comments below:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

//this was made as a function that returns a value
module.exports = (env, argv) => {

  //Here a constant isProduction is created that we can use as a switch to target code that should run either only in production or only in development mode.
  const isProduction = (argv.mode === "production")

  //Here is the return statement that returns the entire settings section as an object
  return {
    module: {
      rules: [
          // code removed for brevity  
      ]
    },
    //Will only run in production mode. Note the ... is the spread operator.
    ...(isProduction && {
      optimization: {
         //I removed the `minimize: true,` line as per winwiz1's suggestion
         minimizer: [
            new TerserPlugin({
                terserOptions: {
                        extractComments: 'all',
                        compress: {
                                drop_console: true
                        },
                }
             })
          ],
       },
    }),
    //Here we only set the devtool to eval-source-map if we are in development mode
    devtool: !isProduction && 'eval-source-map',
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
      }),
      new CopyPlugin([
        { from: 'src/css', to: 'css' }
      ])
    ]
  };
};

Collectives™ on Stack Overflow

plugin is not working in Webpack with React JS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related