How to use image-minimizer-webpack-plugin in an Angular application

Question

I have been trying to install, configure and use image-minimizer-webpack-plugin with an Angular 13 application, but I have found no clear, complete and up to date example of how to do this.

Answer 1

the default Angular cli does not have a separate webpack config. I managed to use image-minimizer-webpack-plugin by using the file custom-webpack.config.js referenced in the angular.json file:

angular.json:

................
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
..............
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            }
...............

custom-webpack.config.js:

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new ImageMinimizerPlugin({
      test: /\.(jpe?g|png|gif)$/i,
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            // ['jpegtran', { progressive: true }],
            ['mozjpeg', { quality: 60 }],
            ['optipng', { optimizationLevel: 5 }],
            ['pngquant', { quality: [0.7, 0.8] }]
          ]
        }
      }
    })
  ]
};