npm add @yuanjianming/unplugin-image-convert -D- vite.config.js
import { defineConfig } from 'vite'
import viteImageConvert from '@yuanjianming/unplugin-image-convert/vite'
export default defineConfig({
//....
plugins: [viteImageConvert({
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
})],
})- webpack.config.js
const webpackImageConvert =require('@yuanjianming/unplugin-image-convert/webpack')
module.exports ={
plugins:[
webpackImageConvert({
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
})
]
}| option | type | default | describe |
|---|---|---|---|
test |
RegExp |
'' | Regular expression for image resource file path |
encodeOptions |
SharpOutputOption |
webp:{},avif:{} |
Support format conversion for jpeg, png, webp, avif, heif, jxl, gif, Jp2, and tif |
{
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
}