Image-webp-loader NPM

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