Используйте последнюю версию terser-webpack-плагина с Webpack5

#javascript #node.js #webpack #webpack-5

#javascript #node.js #webpack #webpack-5

Вопрос:

Согласно этой ссылке (документация Terser), если вы используете последнюю версию Webpack 5, вам не нужно устанавливать плагин Terser, поскольку он включен в Webpack 5 из коробки. Тем не менее, мне трудно заставить это работать.

Если я удалю terser-webpack-plugin из своего packages.json файла и попытаюсь использовать его следующим образом (см. Ниже webpack.production.js ), я получаю ошибки сборки, подобные этой:

[webpack-cli] Не удалось загрузить ‘D:ProjectReactMyAppconfigwebpack.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,
            })]
        },
 

Теперь, если я включу последнюю terser-webpack-plugin версию (5.1.1) в свою package.json и запущу свою сборку, я получу следующее сообщение об ошибке:

[webpack-cli] Не удалось загрузить ‘D:ProjectReactMyAppconfigwebpack.production.js ‘ конфигурация

[webpack-cli] Объект недопустимых параметров. Плагин Terser был инициализирован с использованием объекта options, который не соответствует схеме API.

  • options имеет неизвестное свойство ‘sourceMap’. Допустимы следующие свойства: object { test?, include?, exclude?, terserOptions?, extractComments?, parallel?, minify? }

Единственный способ, которым я могу сделать эту работу, — сохранить terser-webpack-plugin версию 4.2.X.

Есть ли способ заставить это работать с последней версией Terser? Или, может быть, я неправильно понял документацию?

Комментарии:

1. Похоже, это проблема совместимости.. Попробуйте обойти, адаптировавшись к шаблону схемы или понизив рейтинг..

2. похоже, проблема еще хуже, даже если вы создаете ее с правильными аргументами, сокращенный код не запускается в браузере, у вас не так много времени, чтобы понять, почему, но то, что я сделал, — это заблокировать webpack до версии 5.16.0 и terser-webpack-plugin до версии 5.1.1 и переместить исходную карту: true в terserOptions и, похоже, все работает нормально. как сказал @zergski, это, вероятно, проблема совместимости. в целом. похоже, версия webpack 5 не готова на 100%, я сожалею, что обновил.

Ответ №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']
        }
      }
     }
    }
  }]
 }
 

Комментарии:

1. Это сработало для меня; minimizer: [() => ({ terserOptions: { mangle: false } })]

2. Я пытался, но не сработало / webpack версии 5.48.0