image-webp-laoder

Your can with webpack-loader to convert ordinary picture format to webp pictures, you can produce original pictures and webp pictures together and keep the same hash

Install

npm install image-webp-loader --save-dev

Usage

Here is the example of using image-webp-loader, after packaging will produce the original picture and webp picture to the specified path:

rules: [
  {
    test: /\.(png|jpe?g)$/i,
    use: [
      {
        loader: 'image-webp-loader',
        options: {
            publicPath: '/',
            outputPath: resolve(__dirname, './dist'),
            name: 'images/[name].[hash].[ext]'
        }
      }
    ]
  }
]

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------| |name|String|[name].[hash].[ext]|Configure a custom filename template for your file| |publicPath|String|'/'|Configure a custom public path for your file, but you should note that there is an interaction with module.exports.output.publicPath| |outputPath|String|resolve(__dirname, '../../dist')|Configure a custom output path for your file (distPath)| |quality|Int|100|Set webp picture compression quality, (1~100)| |requestWebp|Boolean|false|Whether to directly request webp pictures|

License

MIT