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

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

principle

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

Thanks to html-webpack-plugin that support event hooks

diff version webpack

diff version webpack comparison and configuration

ChangeLog

LICENSE

MIT