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
}
}
}