0.0.2 • Published 5 years ago
support-webp-webpack-plugin v0.0.2
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的等比例缩放 |