#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