@orpha
To compress images using webpack 4, you can follow these steps:
- Install the necessary packages:
npm install --save-dev image-webpack-loader
- In your webpack configuration file (usually named webpack.config.js), add the following code:
module: {
rules: [
{
test: /.(png|jpg|jpeg|gif|svg)$/,
use: [
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
]
}
This configuration tells webpack to use the image-webpack-loader for image files with extensions: .png, .jpg, .jpeg, .gif, and .svg. The options provided are for different image compressors like mozjpeg, optipng, pngquant, gifsicle, and webp.
You can modify these options according to your requirements.
- Run webpack build command to compress the images:
npx webpack
After running the build command, webpack will compress the images specified in your project according to the configuration provided in the webpack configuration file. The compressed images will be outputted to the specified build directory.