插件在带有 React JS 的 Webpack 中不起作用

Question

我正在创建一个 React JS 应用程序。我已经安装了 terser-webpack-plugin 来尝试压缩我的代码以及删除 console.log() 语句。但是，它似乎不起作用。

我已经安装了 terser-webpack-plugin 如下：

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

我的 webpack.config.js 文件如下所示：

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

但是，当我运行 npm run build 或 npm run dev 时，它似乎对最终文件大小没有任何影响，并且 cmets 仍然存在。我做错了什么？

作为旁注，我想知道如何确保这仅适用于构建并且不会删除 dev 上的 cmets。

Answer 1

使用

optimization: {
    minimize: true,

告诉 webpack 创建和使用带有一些默认配置选项的 TerserPlugin 实例。然后创建插件的另一个实例：

new TerserPlugin({

最好不要使用minimize: true,

此配置有效：

...(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,
              }
            }
          })
        ]
      }),

我想知道如何确保这仅适用于 build 而不会删除 dev 上的 cmets。

注意布尔标志isProduction 在上面的代码sn-p 中是如何使用的。该标志定义如下：

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

为了使标志起作用，您在 dev 中调用 webpack 为 webpack，在生产构建中调用为 webpack --env.prod。

供参考，以上代码sn-p取自here

Answer 2

我发现devtool: 'eval-source-map', 行阻止了TerserPlugin 工作。所以，我已经从生产中消除了它。我使用了 winwiz1 的示例并对其进行了修改以适应我的情况。

需要注意的是我的package.json 使用的是以下内容：

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

所以，我不使用我自己的环境变量，而是使用 mode 参数。

要在 webpack 中使用环境变量或参数，您需要对其进行修改，使其成为一个函数。请参阅下面标有 cmets 的更改：

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