webp-converter-webpack-plugin
v1.0.6
Published
``` yarn add webp-converter-webpack-plugin ```
Downloads
13
Readme
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~1 or 0~100 |
| 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|jpeg|webp)\$/i
| image name regular expression |
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% |