can you show a sample webpackconfig?

Below is my settings but its not compressing png,jpg even i set the optimizationLevel to any number.

it would really be helpful if you can show a sample of the whole config with how to optimizationLevel.

sorry im a noob in webpack

const { ImageminWebpackPlugin } = require("imagemin-webpack");
const imageminGifsicle = require("imagemin-gifsicle");
const imageminOptipng = require('imagemin-optipng');
const imageminJpegtran = require('imagemin-jpegtran');
module.exports = {
  entry: {
    home: './src/js/home.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader?name=[name].[ext]&outputPath=images/&publicPath=images/',
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      title: 'Custom template',
      template: path.join(__dirname, 'src', 'index.html'),
      excludeChunks: ['about'],
      hash: true,
    }),
    new ImageminWebpackPlugin({
      imageminOptions: {
        plugins: [
          imageminGifsicle({
            interlaced: true,
            optimizationLevel: 3
          }),
          imageminOptipng({
            interlaced: true,
            optimizationLevel: 3
          }),
          imageminJpegtran({
            progressive: true,
            optimizationLevel: 3
          })
        ]
      },
      name: "[name]-[hash].[ext]",
      test: /\.(jpe?g|png|gif|svg)$/i
    })
  ]
}```

[alexander-akait]

@ronjb04

new ImageminWebpackPlugin({
      imageminOptions: {
        plugins: [
          imageminSvgo({
            plugins: [
              {
                removeViewBox: false
              },
              {
                removeEmptyAttrs: false
              }
            ]
          }),
          imageminGifsicle({
            interlaced: true,
            optimizationLevel: 3
          }),
          imageminOptipng({
            interlaced: true,
            optimizationLevel: 3
          }),
          imageminMozjpeg({
            quality: 65,
            progressive: true,
          }),
        ]
      },
      name: "[path][name].[ext]",
      test: /\.(jpe?g|png|gif|svg)$/i,
    })

1. After CopyWebpackPlugin plugin

Make sure that plugin place after any plugins that add images or other assets which you want to optimized.

https://github.com/itgalaxy/imagemin-webpack#usage

1. You should improve imagemin-svgo

From docs npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

1. Also you use use imagemin-mozjpeg he lossy compression (i.e. lowers the quality of images).

Compression images can be in lossy mode (lowers the quality of images) and lossless (without lowers the quality of images). I documented basic preset in readme https://github.com/itgalaxy/imagemin-webpack#optionals

[alexander-akait]

@ronjb04 feel free to feedback