support-webp-webpack-plugin
supportWebPWebpackPlugin
简化项目webP方案接入，节省项目图片加载流量，提高web访问性能。
安装
npm install --save-dev support-webp-webpack-plugin
基本用法
该插件包含浏览器webP支持检测脚本插入、浏览器webP支持的css样式转换及图片转换为webP格式图片。 只需添加插件到你的 webpack 配置如下：
var SupportWebPWebpackPlugin = ;var path = ; var webpackConfig = entry: 'index.js' output: path: path filename: 'index_bundle.js' plugins: ;这将在生成资源到 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的等比例缩放 |