How to compress images via webpack 4?

Member

by orpha , in category: Javascript , a year ago

How to compress images via webpack 4?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by aubrey , a year 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.

Related Threads:

How to properly compress webpack chunks?
How to use webpack & terser to only compress code?
How to overwrite images via ftp upload in laravel?
How to resolve loader in webpack 4?
How to transpile jsx in webpack 4?
How to enable sass modules in webpack 4?