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

【问题标题】：Use latest terser-webpack-plugin with Webpack5使用最新的 terser-webpack-plugin 和 Webpack5
【发布时间】：2021-05-26 08:12:58
【问题描述】：

根据此链接(Terser documentation)，如果您使用的是最新的 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 中包含最新的 terser-webpack-plugin 版本 (5.1.1) 并运行我的构建，我会收到以下错误消息：

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

[webpack-cli] 无效的选项对象。 Terser 插件已经使用与 API 不匹配的选项对象进行初始化架构。

options 具有未知属性“sourceMap”。这些属性是有效的：object { test?, include?, exclude?, terserOptions?, extractComments？，并行？，缩小？ }

我可以完成这项工作的唯一方法是将terser-webpack-plugin 保留在版本 4.2.X 上。

有没有办法让最新版本的 Terser 可以使用它？还是我误解了文档？

【问题讨论】：

这似乎是一个兼容性问题..尝试通过适应架构模式或降级来解决..
看起来问题更严重，即使您使用正确的参数构建它，缩小的代码也不会在浏览器上运行，没有太多时间去探索原因，但我做了什么是将 webpack 锁定到 5.16.0 版，将 terser-webpack-plugin 锁定到 5.1.1 版，并将 sourceMap: true 移动到 terserOptions 中，看起来一切正常。正如@zergski 所说，这可能是一个兼容性问题。全面的。看起来 webpack 5 版本不是 100% 熟的，我很抱歉我升级了。

标签： javascript node.js webpack webpack-5

【解决方案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

【讨论】：

【解决方案2】：

我已经用 webpack 版本 5.25.0 尝试了以下配置，无需安装 terser-webpack-plugin，它对我有用。

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

【讨论】：

这对我有用； minimizer: [() => ({ terserOptions: { mangle: false } })]
我试过但没用 / webpack 版本 5.48.0