README_zh-CN.md

webp-webpack-plugin

English Docs

本插件用于生成 .webp格式的图片, 保证与原图生成的hash一致。举个例子： vue.e3e41b1.jpg和vue.e3e41b1.jpg.webp同时存在。

下载

npm i -D webp-webpack-plugin
// or
yarn add -D webp-webpack-plugin

使用

在 webpack.config.js配置中，, 参数webp是图片转换webp工具sharp的配置

plugins: [
    new WebPWebpackPlugin({
        match: /(jpe?g|png)$/,
        inject: false,
        injectCode: ''
        webp: {
            quality: 80
        }
    })
]

WebPWebpackPlugin参数

• match 符合正则表达式的图片转换成webp
• inject 默认是false， 默认不插入runtime代码，优先级低于 injectCode
• injectCode 默认为空，不为空 优先级高于 inject:true, 插入自定义的runtime代码
• limit 默认为0，设定转换图片尺寸的阀值。当图片尺寸小于 limit 时则不会生成webp格式的图片
• checkStrict 默认是false.用于检查转换图片的规则，如果是false，则按照match参数来匹配，如果是true，则match匹配之后，限制图片格式为png,jpeg,jpg
• format 默认为 [name].[ext].webp, 另外一种 [name].webp. 提供两种命名支持。

注： runtime代码主要用来对图片进行 webp图片替换逻辑

原理

• webp转换原理，通过改变webpack plugin emit事件时的 compilation.assets 对象，生成文件
• 注入代码逻辑， 感谢 html-webpack-plugin 提供事件钩子

修改历史

• [2017-09-19] 默认注入runtime代码，支持注入自定义runtime代码
• [2017-10-05] 增加测试用例，代码覆盖率，支持webpack2，3
• [2017-10-05] 增加测试用例，代码覆盖率，支持webpack2，3
• [2017-11-29] 增加limit参数，限制图片大小阀值，太小的图片不转换。
• [2017-12-09] 支持两种命名格式 [name].[ext].webp 和 [name].webp

不同版本的webpack比较和配置

不同版本的webpack比较和配置

推荐阅读

• Vue移动项目webp接入

License

MIT