javascript - 使用最新的 terser-webpack-plugin 和 Webpack5

Question

根据此链接(Terser documentation)如果您使用的是最新的 Webpack 5，则无需安装 Terser 插件，因为它已包含在 Webpack 5 中。但是，我很难让这个工作。
如果我删除 terser-webpack-plugin来自我的packages.json文件，我尝试像这样使用它(见下面的 webpack.production.js)，我得到这样的构建错误:

[webpack-cli] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Error: Cannot find module 'terser-webpack-plugin'

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] Failed to load 'D:\Project\React\MyApp\config\webpack.production.js' config

[webpack-cli] Invalid options object. Terser Plugin has beeninitialized using an options object that does not match the APIschema.

• options has an unknown property 'sourceMap'. These properties are valid: object { test?, include?, exclude?, terserOptions?,extractComments?, parallel?, minify? }

我能完成这项工作的唯一方法是保留 terser-webpack-plugin在 4.2.X 版上。
有没有办法可以使用最新的 Terser 版本进行这项工作？或者我误解了文档？

Answer 1

嗨，这是我如何解决 Terserof Webpack 5
在 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