Webpack 4: How to minify images using Imagemin Plugin

Loading images with file-loader and minifying them using imagemin plugin.

[devn]

regex typo missing an escape slash /\.(js|jsx)$/ and /\.(scss|css)/

[antoniojimenez]

thank you so much for the video, it is a great help. I wonder if in webpack 5 can we still use this plugins or there is another option??
Like your videos !!

[ladyking]

>>>> the compressing issue in webpack 5 <<<<
Adding it as a rule (not as a plugin) solved the compressing issue for me:

const ImageMinimizerPlugin =

{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
options: {
severityError: 'warning', // Ignore errors on corrupted images
minimizerOptions: {
plugins: [
['gifsicle', { interlaced: true }],
['mozjpeg', { progressive: true, quality: 60}],
[
'pngquant',
{
quality: [0.6, 0.8],
},
],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}
},
]
}