webpack plugin for making webp format file
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.github update template Sep 27, 2017
tests feat: add format options, fix #7 Dec 9, 2017
.eslintignore eslint: ignore tests/dist files Oct 13, 2017
.npmignore feat: refactor and format style, fix #1 #3 and close PR #2 Oct 8, 2017
.npmrc feat: refactor and format style, fix #1 #3 and close PR #2 Oct 8, 2017
LICENSE add docs and change default opts Sep 27, 2017
README.md docs: fix Jun 6, 2018
README_zh-CN.md docs: fix Jun 6, 2018
_config.yml Set theme jekyll-theme-cayman Feb 22, 2018
package.json docs: fix Jun 6, 2018
yarn.lock docs: fix Jun 6, 2018



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.


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


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.


  • 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


  • [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