【Vite】画像とその読み込みパスをwebp化するプラグインを作成しました

先日Vite環境でLPを開発する案件があったのですが。
画像とその読み込みパスを一括でwebpに変換するプラグインがなかったので、（よく探せばあるかも・・）
そのためのViteプラグインを作成しました。

npmに公開したので、もしお役に立てれば幸いです.

使い方

インストール

npm i vite-plugin-webp-and-path

読み込み

オプションなしの場合

• ./dist/配下が変換対象です。
• jpg,pngがwebpに変換されます
• html,cssの読み込みパスがwebpに変換されます

import VitePluginWebpAndPath from 'vite-plugin-webp-and-path';

export default defineConfig({
	plugins: [
		VitePluginWebpAndPath(),
	],
});

オプションありの場合

import VitePluginWebpAndPath from 'vite-plugin-webp-and-path';

export default defineConfig({
	plugins: [
		VitePluginWebpAndPath({
			targetDir: './dist/',  // デフォルトは './dist/'
			imgExtensions: 'jpg,png',  // デフォルトは 'jpg,png'
			textExtensions: 'html,css',  // デフォルトは 'html,css'
			quality: 80,  // デフォルトは 80
		}),
	],
});

https://www.npmjs.com/package/vite-plugin-webp-and-path

https://github.com/rei990/vite-plugin-webp-and-path