webp-converter-webpack-plugin
v1.0.6 webpack webp
install
yarn add webp-converter-webpack-plugin
use
const WebpPlugin = require("webp-converter-webpack-plugin");
plugins: [
...,
new WebpPlugin({
quality: 0.8,
changeName: false,
enabled: true,
log: true,
limit: 1024 * 32,
imageReg: /\.(png|jpg|jpeg|webp)$/i
}),
],
| name | default | desc |
|---|---|---|
| quality | 0.8 | quality of webp, 0 |
| changeName | false | change fileName [name].jpg to [name].webp. if you want to change ouput filenname you also need change url-loader config |
| enabled | true | enable this plugin |
| log | true | show compress info log |
| limit | 1024 * 32 | Images size bigger than 32K will be compressed, default 32k |
| imageReg | `/.(png | jpg |
notice
if you use changeName, you need to config url-loader to change image name too.
{
test: /\.(png|jpg|jpeg|ico|webp)$/i,
use: {
loader: "url-loader",
options: { limit: 8192, name: "[hash].webp" },
},
},
result
| filename | raw size | webp size | compress ratio |
|---|---|---|---|
| cab72b5040f5cb047a86e251c5303fb4.webp | 12.47k | 5.91k | 47.37% |
| 64fe31f5ec09e8a17860d24e7c04921d.webp | 10104.01k | 2286.62k | 22.63% |
| 00ae1b36370fe4694f7cec16fea9d48c.webp | 5926.21k | 727.20k | 12.27% |
npm i webp-converter-webpack-plugin
Metadata
- MIT
- >= 10.0.0
- ahaoboy
- released 8/22/2020
