Sharp+Webpack实现JPG/PNG转WebP/AVIF及压缩问题求助

你的核心问题是错误地将Sharp直接作为Webpack插件使用——Sharp本身是Node.js的图片处理库，并非Webpack插件，无法直接放入plugins数组生效。需要通过Webpack的loader将Sharp集成到图片处理流程中，以下是两种可行的配置方案：

方案一：使用sharp-loader（直接集成Sharp） #

这是最直接的方式，专门为Webpack封装了Sharp的处理能力。

1. 安装依赖 #

npm install sharp-loader sharp --save-dev

2. Webpack配置示例 #

module.exports = {
  module: {
    rules: [
      {
        // 匹配JPG/PNG文件
        test: /\.(png|jpe?g)$/i,
        use: [
          {
            loader: 'sharp-loader',
            options: {
              // 输出文件名模板（可根据需求调整）
              name: '[name]-[hash:8].[ext]',
              // WebP格式压缩配置
              webp: {
                quality: 75, // 质量0-100，值越高质量越好
                lossless: false // 是否无损压缩
              },
              // AVIF格式压缩配置
              avif: {
                quality: 70,
                speed: 5 // 压缩速度1-10，值越快压缩率越低
              },
              // 可选：保留原格式的压缩配置
              png: { quality: 80 },
              jpeg: { quality: 75 }
            }
          }
        ]
      }
    ]
  }
};

方案二：使用responsive-loader配合Sharp（支持多格式/多尺寸输出） #

如果需要同时生成多尺寸、多格式的图片，推荐这种方式。

1. 安装依赖 #

npm install responsive-loader sharp --save-dev

2. Webpack配置示例 #

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g)$/i,
        use: [
          {
            loader: 'responsive-loader',
            options: {
              // 指定用Sharp作为图片处理器
              adapter: require('responsive-loader/sharp'),
              // 配置需要生成的格式及对应质量
              formats: [
                { format: 'webp', quality: 75 },
                { format: 'avif', quality: 70 },
                { format: 'png', quality: 80 },
                { format: 'jpeg', quality: 75 }
              ],
              // 输出文件名模板
              name: '[name]-[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
};

关键说明 #

• Sharp的格式配置参数对应其原生API：比如webp()、avif()的配置项，可参考Sharp官方文档中对应格式的参数说明。
• 若只需转换为WebP/AVIF而保留原格式，可调整formats或sharp-loader的配置，仅开启需要的格式。

内容的提问来源于stack exchange，提问作者Michael