support-webp-webpack-plugin
v0.0.2
Published
use WebP in css background & conversion png/jpe?g to webp
Downloads
2
Maintainers
Readme
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的等比例缩放|