/webp-webpack-plugin

webpack plugin for making webp format file

Primary LanguageJavaScriptMIT LicenseMIT

webp-webpack-plugin

Build Status codecov dependencies GitHub license

简体中文文档

generate the webp image, make the same hash of original image. For example, vue.e3e41b1.jpg and vue.e3e41b1.jpg.webp exists at the same env.

Install

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

Usage

in the webpack.config.js, the options webp refer to sharp webp options

plugins: [
    new WebPWebpackPlugin({
        match: /(jpe?g|png)$/,
        webp: {
            quality: 80,
            inject: true, // inject the default runtime code
            injectCode: '' // inject your code
        }
    })
]

WebPWebpackPlugin options

  • match regexp that help plugin match the images need to transform to webp
  • inject default false. When the value is false, not inject the runtime code. The priority level is lower than the option injectCode
  • injectCode default ''. If the value is not empty, the priority level is more than the option inject
  • limit default 0. If the image is smaller than the limit (in bytes) the image will not be transformed to webp
  • checkStrict default false. Check the transformed image rule. If false, use the match options, else limit png, jpeg, jpg suffix image.
  • format default [name].[ext].webp, another is [name].webp. In order to support more names.

tips: the inject runtime code help to replace the image src with webp format.

principle

  • webp transform

change the webpack plugin emit and modify the compilation.assets object, then generate the webp format image with the same hash as the original img src

  • inject runtime code

Thanks to html-webpack-plugin that support event hooks

diff version webpack

diff version webpack comparison and configuration

ChangeLog

  • [2017-09-19] inject the code that can replace the img src by support webp and developers can inject your custom code
  • [2017-10-05] add tests, travis, eslint and fix webpack2,3 bugs
  • [2017-11-29] add limit options, if image size is bigger than the limit, transform to webp, else not。
  • [2017-12-09] support two webp format [name].[ext].webp[name].webp

LICENSE

MIT