Image2webp-loader NPM

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',
          },
        ],
      },
    ],
  },
};