README
让你的CSS中的图片也能动态支持Webp
目前并非所有浏览器都能支持Webp图片,如果图片在HTML中,可以通过JS去进行判断,但是CSS中的图片无法通过JS去判断,通过此插件,可以自动生成Webp图片版的CSS,并且自动将是否支持Webp的判断语法插入到对应的HTML中
<!-- Before -->
<link rel="stylesheet" href="xxx.css">
<!-- After -->
<script type="text/javascript">
var isSupportWebp = !![].map && 0 == document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp");
oHead = document.querySelector("head");
oStyle = document.createElement("link");
oStyle.rel = "stylesheet";
oStyle.href = isSupportWebp ? "xxx.webp.css" : "xxx.css";
oHead.appendChild(oStyle)
</script>
使用前置条件
webpack + html-webpack-plugin + extract-text-webpack-plugin
使用方法
const HtmlWebpackCssWebpPlugin = require('html-webpack-css-webp-plugin');
module.exports = {
plugins: [
new HtmlWebpackCssWebpPlugin({
postfix: 'x-oss-process=image/format,webp' // 此为阿里云OSS webp图片后缀,其他OSS自行查询文档
})
]
}
参数配置
- postfix:webp图片后缀,例如阿里云OSS webp图片后缀为'x-oss-process=image/format,webp'
实现原理
- 将webpack生成的所有css文件复制一份,命名为xxx.webp.css
- 将xxx.webp.css中的图片全部加上postfix
- 基于html-webpack-plugin,移除css assets,并添加一段JS,JS中会判断是否支持webp,如果支持则加载xxx.webp.css,如果不支持,则加载xxx.css
ChangeLog
1.0.4
1.忽略第三方图片资源