# @m8x/webp-loader

> WebP image loader & converter for Webpack

Latest version **1.0.0** (published 2022-05-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @m8x/webp-loader
pnpm add @m8x/webp-loader
yarn add @m8x/webp-loader
bun add @m8x/webp-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-05-28 |
| First published | 2022-05-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=12 |
| Dependencies | 2 |
| Unpacked size | 7.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Max Riveiro |
| Maintainers | m8x |
| Keywords | webpack, webp, image |

## Links

- npm: https://www.npmjs.com/package/@m8x/webp-loader
- Repository: https://github.com/m8x/webp-loader
- Issues: https://github.com/m8x/webp-loader/issues
- npm.io page: https://npm.io/package/@m8x/webp-loader

## Dependencies (2)

- [imagemin](https://npm.io/package/imagemin.md) ^8.0.1
- [imagemin-webp](https://npm.io/package/imagemin-webp.md) ^7.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-05-28

## README

# @m8x/webp-loader

> forked from [webp-loader](https://www.npmjs.com/package/webp-loader) v0.6.0.

[![Build Status](https://github.com/m8x/webp-loader/actions/workflows/test.yaml/badge.svg?branch=main)](https://github.com/m8x/webp-loader/actions/workflows/test.yaml)

[WebP](https://developers.google.com/speed/webp/) image loader & converter loader for Webpack.

## Install

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

## Usage

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

```javascript
// 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](https://github.com/imagemin/imagemin-webp) you should pass a options in JSON form:

```javascript
// 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](https://github.com/imagemin/imagemin-webp#imageminwebpoptions).

## Inspiration

`webp-loader` is heavily inspired by [tcoopman/image-webpack-loader](https://github.com/tcoopman/image-webpack-loader).

## License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/@m8x/webp-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._