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

[andreidiaconescu]

Documentation Is:

• [ X] Missing
• [ X] Needed
• Confusing
• Not Sure?

Please Explain in Detail...

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.
Any help would be appreciated.
Thank you

Your Proposal for Changes

[alexander-akait]

Hello, can you provide your webpack configuration?

[andreidiaconescu]

Hello,
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] }]
          ]
        }
      }
    })
  ]
};

[alexander-akait]

@andreidiaconescu Maybe you can provide github repo? Looks like it should work

[andreidiaconescu]

For me it worked, the solution from previous comment.

[alexander-akait]

So we can close? If you want to help other developer you can send a PR to angular docs