How to compress images via webpack 4?

Member

by orpha , in category: Javascript , 5 months ago

How to compress images via webpack 4?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by aubrey , 5 months ago

@orpha 

To compress images using webpack 4, you can follow these steps:

  1. Install the necessary packages: npm install --save-dev image-webpack-loader
  2. 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.
  3. 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.