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
}
})
]
injectCode
inject
match
options, else limit png
, jpeg
, jpg
suffix image.[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.
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 comparison and configuration
[name].[ext].webp
和 [name].webp