Не работает ImageMinimizerPlugin в Webpack
При попытке сжать изображение в webpack5 при помощи ImageMinimizerPlugin получаю ошибку
Конфиг webpack
export default {
...
module: {
rules: [
...
{
test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
type: "asset",
generator: {
filename: "assets/img/[hash][ext]",
},
},
]
}
Кроме type: "asset" пробовал "asset/recource"
а также импорт картинок через file-loader, ошибка по итогу одна.
Генерация изображений
optimization: {
usedExports: false,
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
mangle: false,
compress: true,
output: {
beautify: true,
comments: false,
},
},
extractComments: false,
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
// Svgo configuration here https://github.com/svg/svgo#configuration
[
"svgo",
{
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
addAttributesToSVGElement: {
params: {
attributes: [
{ xmlns: "http://www.w3.org/2000/svg" },
],
},
},
},
},
},
],
},
],
],
},
},
}),
],
},
Картинку в компоненте импортирую так
import React from "react";
const imageSrc = require("./test.jpg");
export default function Start() {
return <img src={String(imageSrc)} />
}
Тут пробовал импорт и через import img from "./test.jpg"
, ошибка по итогу всегда такая же
конфиг package.json
{
"name": "st2",
"version": "1.0.0",
"main": "src/index.tsx",
"type": "module",
"config": {
"dev": "--config webpack/dev.config.js",
"prod": "--config webpack/prod.config.js"
},
"scripts": {
"start": "webpack serve",
"dev": "cross-env-shell NODE_ENV=development webpack serve ${npm_package_config_dev}",
"build": "cross-env-shell NODE_ENV=production webpack ${npm_package_config_prod}"
},
"author": "",
"license": "",
"description": "",
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
},
"browserslist": {
"production": [
"> 1%",
"last 1 version",
"not dead"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@babel/core": "^7.24.6",
"@babel/preset-env": "^7.24.6",
"@babel/preset-react": "^7.24.6",
"@babel/preset-typescript": "^7.24.6",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"babel-loader": "^9.1.3",
"clean-webpack-plugin": "^4.0.0",
"cross-env": "^7.0.3",
"css-loader": "^7.1.2",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"image-minimizer-webpack-plugin": "^4.0.1",
"imagemin": "^9.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^11.0.0",
"mini-css-extract-plugin": "^2.9.0",
"postcss-loader": "^8.1.1",
"postcss-preset-env": "^9.5.14",
"sass": "^1.77.4",
"sass-loader": "^14.2.1",
"style-loader": "^4.0.0",
"typescript": "^5.4.5",
"typescript-plugin-css-modules": "^5.1.0",
"webpack": "^5.91.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4",
"webpack-merge": "^5.10.0"
}
}
Без попытки сжатия изображения сборка проходит без ошибок.
Ответы (1 шт):
Мне ответили в репозитории плагина image minimizer plugin
https://github.com/webpack-contrib/image-minimizer-webpack-plugin/issues/443
Ошибка была в одной из библиотек плагина, для решения проблемы необходимо обновить плагин до версии 4.0.2