webpack5图片压缩与导出的图片文件不符合

Question

在使用webpack5打包图片的时候，发现html页面的img标签输出的图片和实际经过导出的文件不一致。
下面是我使用asset 去处理图片

    // 资源模块处理图片
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb
          }
        },
        generator: {
          filename: 'images/[name].[hash:5][ext]'
          // filename: 'images/[name][ext]'   // 目前临时解决方法
        }
      },

下面是插件处理html

    //打包HTML页面
    new HtmlWebpackPlugin({
      template: './src/index.ejs',
      filename: 'index.html',
      // 压缩html页面 开发环境不需要
      minify: {
        collapseWhitespace: true,
        keepClosingSlash: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true
      }
    })

图片生成的目录里面的图片实际名称比如是banner.19790.jpg,而且控制台有显示下面的信息：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  images/banner.19790.jpg (483 KiB)
  images/bg01.8a755.jpg (250 KiB)
  images/bg03.8d4e5.jpg (375 KiB)
  images/box2_img.99136.png (498 KiB)
  images/box3_img01.5f0ed.png (400 KiB)
  images/box3_img04.f5de5.png (314 KiB)
  images/box4_img01.78dac.png (288 KiB)
  images/box5_img.df433.png (1.09 MiB)
  images/box6_img.efd62.png (474 KiB)
  bundle.js (508 KiB)

但是打包导出的文件，对应的图片名称变成了banner.60248.jpg，这个是什么情况？感觉是插件和loader的处理流程上出现了问题。
目前临时的解决方法是，前面注释的那样，去掉了hash值。所以，到底应该怎么解决这个？

Answer 1

找到问题所在了：

    new ImageMinimizerPlugin({
      loader:false,  //这改成true 或 去掉这个设置
      minimizerOptions: {
        // Lossless optimization with custom option
        // Feel free to experiment with options for better result for you
        plugins: [
          ["gifsicle", { interlaced: true }],
          ["jpegtran", { progressive: true }],
          ["optipng", { optimizationLevel: 5 }],
        ],
      },
      filter: (source, sourcePath) => {
        if (source.byteLength < 8 * 1024) { //小于8Kb不优化
          return false;
        }
        return true;
      },
    }),

图片压缩之后应该再调用loader去处理，而我却把loader设置成false。应该设置为true，或去掉这个配置（默认就是true）