I'm trying to get my head around Webpack and building a Typescript project from scratch.

Even though the project runs on dev and build, it seems I wrote something wrong in the webpack.config.js because I'm getting this error with every image I'm trying to load:

WARNING in No plugins found for imagemin. Please read documentation.

The images get created in the dist folder but still, I got this warning.

I uninstalled and installed again Imagemin but the warning stills appears.

webpack.config.js

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './shared',
          to: '',
        },
        {
          from: './app/images',
          to: 'images'
        }
      ],
    }),

    new ImageMinimizerPlugin({
      minimizerOptions: {
        options: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 8 }]
          ],
        },
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
        loader: 'file-loader',
        options: {
          name() {
            return '[hash].[ext]';
          },
        },
      },
      {
        test: /\.(jpe?g|png|gif|svg|webp)$/i,
        use: [
          {
            loader: ImageMinimizerPlugin.loader,
          },
        ],
      },
  },
};

`package.json``

{
  ...
  "devDependencies": {
    "copy-webpack-plugin": "^8.1.1",
    "image-minimizer-webpack-plugin": "^2.2.0",
    "imagemin": "^7.0.1",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^9.0.0",
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

CodePudding user response：

You have an extra options object inside minimizerOptions in ImageMinimizerPlugin() which shouldn't be there. This is the correct configuration:

new ImageMinimizerPlugin({
  minimizerOptions: {
    plugins: [
      ['gifsicle', { interlaced: true }],
      ['jpegtran', { progressive: true }],
      ['optipng', { optimizationLevel: 8 }]
    ],
  },
}),