使用最新的terser-webpack-插件与Webpack5

Question

根据这个链接(文字资料)，如果你使用的是最新的Webpack 5，你不需要安装这个插件，因为它是包含在Webpack 5开箱。然而，我很难做到这一点。

如果我从我的terser-webpack-plugin文件中删除packages.json文件，并尝试像这样使用它(参见下面的webpack.production.js)，我会得到如下构建错误：

webpack-cli未能加载'D:\Project\React\MyApp\config\webpack.production.js‘配置webpack-cli错误:找不到模块’‘

webpack.production.js

const TerserPlugin = require('terser-webpack-plugin');
const webpack = require('webpack');
const { merge } = require('webpack-merge');

module.exports = merge(commonCfg, {
        ......
        optimization: {
            minimize: true,
            minimizer: [new TerserPlugin({
                cache: false,
                parallel: false,
                sourceMap: true,
            })]
        },

现在，如果我在我的terser-webpack-plugin上包含了最新的package.json版本(5.1.1)并运行我的构建，我会得到以下错误消息：

webpack-cli未能加载'D:\Project\React\MyApp\config\webpack.production.js‘配置webpack-cli无效的选项对象.Terser插件已经使用与API模式不匹配的options对象初始化。

• 选项具有一个未知的属性“sourceMap”。这些属性是有效的:对象{ test？、包含？、排除？、terserOptions？、extractComments？、并行？、minify？}

使此工作的唯一方法是将terser-webpack-plugin保持在4.2.X版本上。

有什么方法可以让我的工作与最新的简捷版本？或者我误解了文件？

Answer 1

你好，这是我如何解决Webpack 5的Terserof

Webpack前5：

minimizer: [
  new TerserPlugin({
    terserOptions: {
      mangle: {
        compress: {},
      },
    }
  })
]

Webpack之后5：

minimizer: [
  (compiler) => {
    const TerserPlugin = require('terser-webpack-plugin');
    new TerserPlugin({
      terserOptions: {
        compress: {},
      }
    }).apply(compiler);
  },
]

您可以在这里阅读更多有关它的https://webpack.js.org/configuration/optimization/和检查terser选项，请查看这个url https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions。

这里链接到我的文章，更多的迁移错误问题解决了https://medium.com/@arianpopalyar/webpack-4-to-webpack-5-migration-9bc683d2bc72

Answer 2

我已经尝试了下面的配置与webpack版本5.25.0，不需要安装terser插件，它是为我工作。

 optimization: {
   minimizer: [(compiler) => {
    return () => {
     return {
      terserOptions: {
        mangle: {
          reserved: ['Td', 'Tr', 'Th', 'Thead']
        }
      }
     }
    }
  }]
 }