Registry / http-networking / webp-loader

webp-loader

library0.6.0jsnpmunverified

Webpack loader that converts JPEG and PNG images to WebP format using imagemin-webp under the hood. Version 0.6.0 is the latest stable release. The loader integrates with webpack's loader pipeline and is typically combined with file-loader or multi-loader to produce both original and WebP versions. Key differentiator: it provides a direct bridge between webpack and imagemin-webp, allowing configuration via query string. However, it has seen only sporadic updates and is largely superseded by more modern image optimization plugins like imagemin-webpack-plugin.

http-networking

npm install webp-loader

github ↗package ↗

INSTALL

IMPORT

SIG · WEBP-LOADER

webp-loader

http-networkingjavascriptv0.6.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ // In webpack config: { test: /\.(jpe?g|png)$/i, use: ['file-loader', 'webp-loader'] }

✗ import webpLoader from 'webp-loader' // Not meant for direct import in application code

webp-loader is a webpack loader and should be referenced in webpack configuration, not imported in source code.

multi

✓ import multi from 'multi-loader' // Using multi-loader to bundle multiple loaders

✗ import multi from 'webp-loader' // multi is from multi-loader, not from webp-loader

When using multi-loader, import it separately; webp-loader does not export multi.

Shows basic webpack config to convert images to WebP using webp-loader alongside file-loader, including passing options.

// webpack.config.js module.exports = { module: { rules: [ { test: /\.(jpe?g|png)$/i, use: [ 'file-loader', 'webp-loader' ] } ] } }; // With options (quality 80): { test: /\.(jpe?g|png)$/i, use: [ 'file-loader', { loader: 'webp-loader', options: { quality: 80 } } ] }

Debug

Known issues

deprecatedPackage has low maintenance and is essentially deprecated in favor of webpack plugins like imagemin-webpack-plugin or next-gen tools like sharp.

fix

Consider migrating to imagemin-webpack-plugin or sharp-based solutions.

affects: >=0

gotchaLoader only works when chained after file-loader; if you want both original and WebP versions, you must use multi-loader or custom logic.

fix

Use multi-loader to apply two loader pipelines as shown in README.

affects: >=0

gotchaOptions must be passed as JSON string in query string or as object in 'options' property; the query string format may cause issues with complex options.

fix

Use object format via options property in webpack config.

affects: >=0

breakingPeer dependency on webpack * (any version) may cause compatibility issues with webpack 5; not tested with webpack 5.

fix

Pin webpack version to 4 or manually adjust loader; consider migration.

affects: >=0.5.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'webp-loader'

webp-loader not installed as devDependency.

fix

Run npm install webp-loader --save-dev

Error: webp-loader requires webpack and webpack-cli as peer dependencies.

Missing peer dependencies.

fix

Install webpack and webpack-cli: npm install webpack webpack-cli --save-dev

ValidationError: Invalid options object. webp-loader has been initialized using an options object that does not match the API schema.

Options passed in query string format are not parsed correctly when not using the object form.

fix

Use the options object in webpack config: { loader: 'webp-loader', options: { quality: 80 } }

Upgrade

Version history

0.6.0latest on npm

Audit

Dependencies

webpackrequiredpeer dependency required for loader to work

webpack-clioptionalpeer dependency for running webpack

Agent activity

19 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kavu/webp-loader ↗

packagehttps://www.npmjs.com/package/webp-loader ↗