@onism/webp-convert-loader
This loader combime webp-in-css with squoosh, convert your image to webp if possible, and transform your css selector with webp or nowebp class.
Getting Started
npm install --save-dev @onism/webp-convert-loaderin your webppack.config.js, add this loader as the last loader in css rules
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "webp-convert-loader",
options: {
modules: true
},
},
],
},
];
},
plugins: [
new WebpConvertPlugin({
filename: '[hash].[ext]',
output: "images",
encodeOption: {
oxipng: {
level: 4,
},
mozjpeg: {
quality: 60,
},
},
quant: {
numColors: 255,
dither: 0.7,
},
}),
]You need to manually import @onism/webp-convert-loader/polyfill.js or insert script that can detect webp support of browser in the <head> tag.
If you want to use addNoJs option, you need manually set no-js class on <body>. Polyfill will remove this class, if JS is enabled in the browser. Polyfill should be inserted in the <head>, without async or defer attributes, before css. addNoJs option is enabled by default.
Loader Options
| Name | Type | Default | Description |
|---|---|---|---|
| modules | Boolean | false |
wrap classes to :global() to support CSS Modules |
| noWebpClass | String | no-webp |
class name for browser without WebP support. |
| webpClass | String | webp |
class name for browser with WebP support. |
| addNoJs | Boolean | false |
add no-js class to selector |
| noJsClass | String | no-js |
class name for browser without JS support. |
minifyFormate |
String | minify/[name][ext] |
output minified image name formate |
webpFormate |
String | webp/[name][ext].webp |
- |
minifyFormate
support placeholders includes [name], [ext], [path] and [hash]
webpFormate
similart to minifyFormate
Plugin Options
| Name | Type | Default | Description |
|---|---|---|---|
encodeOption |
Object | {} |
- |
quant |
Object | {} |
- |
encodeOption
encode option pass to squoosh to minify images, see encodeOption to found the default values for each options
{} an empty object means 'use default settings
quant
Reduce the number of colors used (aka. paletting), see quant to found quant option
Feedback
If you have any feedback, please reach out to us at evontgoh@foxmail.com