如何通过ImageMinimizerWebpackPlugin将压缩图片存入public/assets文件夹

要将压缩后的图片指定输出到public/assets文件夹，你需要调整Webpack的资源输出配置，并结合ImageMinimizerPlugin的设置，具体修改如下：

1. 修改图片资源的规则配置 #

在module.rules的图片处理规则中，添加type: 'asset/resource'指定资源类型，并通过generator.filename定义输出路径：

module: {
  rules: [
    {
      test: /\.(jpe?g|png|gif|svg|webp)$/i,
      // 指定资源类型为资源文件，Webpack会将其输出到指定路径
      type: 'asset/resource',
      generator: {
        // 定义输出路径：public/assets目录下，保留原文件名+哈希值+后缀
        filename: 'public/assets/[name].[hash][ext][query]'
      },
      use: [
        {
          loader: ImageMinimizerPlugin.loader,
        },
      ],
    },
  ],
},

2. 保留优化阶段的压缩配置 #

你原有的optimization.minimizer中的ImageMinimizerPlugin配置可以保留，它会在Webpack的优化阶段进一步处理图片资源（如果已经通过loader处理，也可根据实际效果选择是否保留，两者启用会进行双重压缩）：

optimization: {
  minimize: true,
  minimizer: [
    "...", // 保留默认的JS/CSS压缩器
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ["optipng", { optimizationLevel: 5 }],
          ],
        },
      },
    }),
  ],
},

关键说明 #

• type: 'asset/resource'是Webpack 5的asset module特性，替代原file-loader处理图片等资源文件。
• generator.filename的路径相对于Webpack配置的output.path（默认是项目根目录下的dist文件夹），最终图片会输出到dist/public/assets目录。若要直接输出到项目根目录的public/assets，可修改output.path为path.resolve(__dirname, 'public')，但此操作会让所有打包产物进入public目录，需根据项目需求调整。
• 若仅需在优化阶段压缩图片，可移除module.rules中的ImageMinimizerPlugin.loader，仅保留optimization中的插件配置即可。

内容的提问来源于stack exchange，提问作者Durdona A.