如何配置vite-plugin-image-optimizer并行将PNG/JPG转为WebP？

问题描述 #

我当前Vite项目的vite.config.js配置如下：

import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  build: {
    inject: true
  },
  plugins: [
    [injectHTML()],
    ViteImageOptimizer({
      dir: 'public/images',
      outDir: 'dist/images',
      png: {
        quality: 80,
      },
      jpeg: {
        quality: 80,
      },
      jpg: {
        quality: 80,
      },
      webp: {
        lossless: true,
      },
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
  ],
});

目前vite-plugin-image-optimizer能正常将public/images中的图片压缩后输出到dist/images，但我还需要同时将这些图片转换为WebP格式并保存到同一路径，用于<picture>标签。请问能否通过配置该插件实现？如果不行，有没有不冲突的替代插件？

解决方案 #

1. 直接修改vite-plugin-image-optimizer配置实现 #

该插件本身支持生成WebP格式的并行输出，只需在配置中添加convertToWebp选项即可。同时注意原配置中injectHTML()被包裹在数组里是错误写法，会导致插件无法正常工作，需去掉外层数组。修改后的完整配置如下：

import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  build: {
    inject: true
  },
  plugins: [
    injectHTML(),
    ViteImageOptimizer({
      dir: 'public/images',
      outDir: 'dist/images',
      png: {
        quality: 80,
      },
      jpeg: {
        quality: 80,
      },
      jpg: {
        quality: 80,
      },
      webp: {
        lossless: true,
      },
      // 新增WebP转换配置
      convertToWebp: {
        quality: 80, // 自定义WebP压缩质量
        lossless: false // 根据需求设置是否无损压缩
      }
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
  ],
});

添加convertToWebp后，插件会在压缩原格式图片的同时，自动将PNG/JPG/JPEG等格式转换为对应的WebP文件（例如image.png会生成压缩后的image.png和image.webp），并存入dist/images目录。

2. 替代插件方案（若上述配置不生效） #

如果vite-plugin-image-optimizer的convertToWebp选项不符合需求，可以尝试使用vite-plugin-webp-generator插件，它专门用于生成WebP格式图片，且与现有插件冲突概率较低。

安装插件

npm install vite-plugin-webp-generator --save-dev

修改配置文件

import { defineConfig } from 'vite';
import injectHTML from 'vite-plugin-html-inject';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import legacy from '@vitejs/plugin-legacy';
import webpGenerator from 'vite-plugin-webp-generator';

export default defineConfig({
  build: {
    inject: true
  },
  plugins: [
    injectHTML(),
    ViteImageOptimizer({
      dir: 'public/images',
      outDir: 'dist/images',
      png: {
        quality: 80,
      },
      jpeg: {
        quality: 80,
      },
      jpg: {
        quality: 80,
      },
      webp: {
        lossless: true,
      },
    }),
    webpGenerator({
      from: ['png', 'jpg', 'jpeg'], // 指定要转换的原图片格式
      dist: 'dist/images', // WebP文件输出目录
      quality: 80 // WebP压缩质量
    }),
    legacy({
      targets: ['defaults', 'not IE 11']
    }),
  ],
});

该插件会在构建时扫描指定格式的图片，生成对应的WebP文件到目标目录，与vite-plugin-image-optimizer的压缩功能互不干扰。

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