I have following webpack.config.js file, from this configuration I managed to compress all images which are consumed from css files.
But I also want to compress all images which I'm copying into dist folder.
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
},
],
}
],
},
plugins: [
// copying static assets to dist directory, i want these images to be compressed as well
new CopyPlugin({
patterns: [{
from: "source/images",
to: "images"
}
],
})
]};
How can I achieve this in webpack 5?
I saw this nice article ( https://web.dev/codelab-imagemin-webpack/ ) explaining how this can be achieved but as it seems imagemin-webpack-plugin is not updated recently.
I was able to get this working by using the copy-webpack-plugin
with image-minimizer-webpack-plugin
minimizer. My config looks something like this.
const CopyPlugin = require("copy-webpack-plugin");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{
from: 'path/to/images/*',
to({ context, absoluteFilename }) {
return "dest/[name][ext]";
}
},
],
}),
],
optimization: {
minimizer: [
new ImageMinimizerPlugin({
loader: true,
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
},
generator: [
{
type: "asset",
implementation: ImageMinimizerPlugin.imageminGenerate,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
"imagemin-svgo",
],
},
},
],
}),
],
},
}
This portion of the docs led me to this solution. https://webpack.js.org/plugins/image-minimizer-webpack-plugin/#generate-webp-images-from-copied-assets
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.