https://github.com/yuan66-hub/unplugin-image-convert
Image multi format conversion plugin based on sharp
https://github.com/yuan66-hub/unplugin-image-convert
sharp unplugin vite webpack
Last synced: 5 days ago
JSON representation
Image multi format conversion plugin based on sharp
- Host: GitHub
- URL: https://github.com/yuan66-hub/unplugin-image-convert
- Owner: yuan66-hub
- Created: 2024-09-02T10:14:31.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-10-24T04:57:42.000Z (6 months ago)
- Last Synced: 2025-04-14T21:12:38.871Z (5 days ago)
- Topics: sharp, unplugin, vite, webpack
- Language: TypeScript
- Homepage:
- Size: 122 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vite - @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js. (Plugins / Framework-agnostic Plugins)
- fucking-awesome-vite - @yuanjianming/unplugin-image-convert - Image multi format conversion plugin based on sharp.js. (Plugins / Framework-agnostic Plugins)
README
# ✨ unplugin-image-convert
## 📦 Install
```bash
npm add @yuanjianming/unplugin-image-convert -D
```
## 💪 Basic Use
- vite.config.js
```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
```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
}
}
})
]
}
```
## 👨💻 Config
| 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`
## 💪 Default Config
```js
{
test:/\.(jpe?g|png)$/,
encodeOptions:{
webp:{
// https://sharp.pixelplumbing.com/api-output#webp
},
avif:{
// https://sharp.pixelplumbing.com/api-output#avif
}
}
}
```