I'm trying to get my head around Webpack and building a Typescript project from scratch.
Even though the project runs on dev and build, it seems I wrote something wrong in the webpack.config.js
because I'm getting this error with every image I'm trying to load:
WARNING in No plugins found for imagemin
. Please read documentation.
The images get created in the dist
folder but still, I got this warning.
I uninstalled and installed again Imagemin
but the warning stills appears.
webpack.config.js
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: '',
},
{
from: './app/images',
to: 'images'
}
],
}),
new ImageMinimizerPlugin({
minimizerOptions: {
options: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 8 }]
],
},
},
}),
],
module: {
rules: [
{
test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name() {
return '[hash].[ext]';
},
},
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
},
],
},
},
};
`package.json``
{
...
"devDependencies": {
"copy-webpack-plugin": "^8.1.1",
"image-minimizer-webpack-plugin": "^2.2.0",
"imagemin": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-mozjpeg": "^10.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^9.0.0",
"webpack": "^5.33.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
}
}
You have an extra options
object inside minimizerOptions
in ImageMinimizerPlugin()
which shouldn't be there. This is the correct configuration:
new ImageMinimizerPlugin({
minimizerOptions: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 8 }]
],
},
}),