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时，它似乎对最终文件大小没有任何影响，并且注释仍然存在。我在做什么错了？

作为旁注，我想知道如何确保它仅适用于构建，而不会删除对dev的注释。

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

我想知道如何确保它仅适用于构建并且不会删除关于dev的注释。

请注意上面的代码片段中如何使用布尔标志isProduction。该标志的定义如下：

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

要使该标志正常工作，请在开发人员中将Webpack称为webpack，在生产版本中将其称为webpack --env.prod。

作为参考，以上代码段摘自here

Answer 2

我发现第devtool: 'eval-source-map',行阻止TerserPlugin正常工作。因此，我从生产中淘汰了它。我已使用winwiz1的示例并对其进行了修改以适合我的情况。

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

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

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

要在webpack中使用环境变量或参数，您需要对其进行修改以使其成为函数。查看下面标有注释的更改：

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

使用React JS的Webpack插件不起作用

2 个答案: