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

Question

根據此鏈接（Terser 文檔） ，如果您使用的是最新的 Webpack 5，則無需安裝 Terser 插件，因為它包含在開箱即用的 Webpack 5 中。 但是，我很難讓這個工作。

如果我從packages.json文件中刪除terser-webpack-plugin並嘗試像這樣使用它（見下文 webpack.production.js），我會得到如下構建錯誤：

[webpack-cli] 無法加載 'D:\Project\React\MyApp\config\webpack.production.js' 配置

[webpack-cli] 錯誤：找不到模塊 '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,
            })]
        },

現在，如果我在 package.json 中包含最新的package.json terser-webpack-plugin版本 (5.1.1) 並運行我的構建，我會收到以下錯誤消息：

[webpack-cli] 無法加載 'D:\Project\React\MyApp\config\webpack.production.js' 配置

[webpack-cli] 無效的選項 object。 Terser 插件已使用與 API 模式不匹配的選項 object 進行了初始化。

• options 具有未知屬性“sourceMap”。 這些屬性有效：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);
        },
    ]

you can read more about it here https://webpack.js.org/configuration/optimization/ and to check the terser option check this 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-webpack-plugin，它對我有用。

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