image2webp-loader

The image2webp-loader resolves import/require() on a image into a url ( return the url with the .webp suffix if the browser supports .webp) and emits the file and the .webp file into the output directory.

Getting Started

To begin, you'll need to install image2webp-loader:

npm install image2webp-loader --save-dev

Import (or require) the target image(s) in one of the bundle's files:

index.js

import img from './file.png';

Then add the loader to your webpack config. For example:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'image2webp-loader',
          },
        ],
      },
    ],
  },
};

Options

quality

Type: Number
Default: 75

.webp image compression quality, value range 0-100

other params

other params same as file-loader