@m8x/webp-loader

forked from webp-loader v0.6.0.

WebP image loader & converter loader for Webpack.

Install

npm install --save-dev @m8x/webp-loader

Usage

Here is the example of using @m8x/webp-loader:

// webpack@5
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    type: 'asset/resource',
    generator: {
      filename: '[name].[hash][ext].webp'
    },
    loader: '@m8x/webp-loader'
  }
]

// webpack@4
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext].webp',
        },
      },
      {
        loader: '@m8x/webp-loader'
      }
    ]
  }
]

Unfortunately, if you wish to pass an options for internal imagemin-webp you should pass a options in JSON form:

// webpack@5
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    type: 'asset/resource',
    generator: {
      filename: '[name].[hash][ext].webp'
    },
    loader: '@m8x/webp-loader',
    options: {
      quality: 10
    }
  }
]

// webpack@4
rules: [
  {
    test: /\.(png|jpe?g)$/i,
    resourceQuery: /webp/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext].webp',
        },
      },
      {
        loader: '@m8x/webp-loader',
        options: {
          quality: 10
        }
      }
    ]
  }
]

Options

For all possible options please visit "API" section of the official imagemin-webp README.

Inspiration

webp-loader is heavily inspired by tcoopman/image-webpack-loader.

License

MIT