plugin is not working in Webpack with React JS

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.

Answer

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