support-webp-webpack-plugin
v0.0.2
Published
use WebP in css background & conversion png/jpe?g to webp
Maintainers
heyaaronReadme
support-webp-webpack-plugin
supportWebPWebpackPlugin
简化项目webP方案接入，节省项目图片加载流量，提高web访问性能。
安装
npm install --save-dev support-webp-webpack-plugin基本用法
该插件包含浏览器webP支持检测脚本插入、浏览器webP支持的css样式转换及图片转换为webP格式图片。 只需添加插件到你的 webpack 配置如下：
var SupportWebPWebpackPlugin = require('support-webp-webpack-plugin');
var path = require('path');
var webpackConfig = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './output'),
filename: 'index_bundle.js'
},
plugins: [new SupportWebPWebpackPlugin()]
};这将在生成资源到 output（或其它资源生成目录）目录之后，对*.html和*.css以及*.(png|jpe?g)资源进行处理:
1.在html的<head>中以prepend方式顶部插入浏览器webP支持检测脚本;
2.生成.webp的css样式:
.banner {
background: url('banner.png');
}
.webps .banner {
background: url('banner.webp');
}3.生成webP图片资源:
./assets/banner.png
./assets/banner.webp配置
|字段名|类型|默认值|描述|
|:---:|:--:|:--:|:---|
|useCheckScript|{Boolean}|true|是否启用浏览器webP支持检测脚本插入|
|useConverImg|{Boolean}|true|是否启用图片转换为WebP格式图片|
|useConverCss|{Boolean}|true|是否启用css样式转换为支持webP格式图片|
|webpQuality|{Number}|75|设置webP图片质量(取值范围0-100)|
|imageResize|{Boolean}|false|是否对尺寸宽度大于750px的图片进行宽度为750px的等比例缩放|