Registry / devops / imagemin-webp-webpack-plugin

imagemin-webp-webpack-plugin

library3.3.6jsnpmunverified

Webpack plugin that converts JPEG, PNG, and GIF images to WebP format while preserving original files. Wraps imagemin, imagemin-webp, and imagemin-gif2webp. Compatible with Webpack 5, 4, and earlier. v3.3.6 stable release with regular dependency updates. Key differentiator: keeps originals and supports GIF via gif2webp. Configurable quality, extension override, detailed logs, silent mode, and strict error handling. A known issue exists with css-loader when importing .webp files that don't exist at build time.

devops

npm install imagemin-webp-webpack-plugin

github ↗package ↗

INSTALL

IMPORT

SIG · IMAGEMIN-WEBP-WEBP

imagemin-webp-webpack-plugin

devopsjavascriptv3.3.6

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.

ImageminWebpWebpackPlugin

✓ const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');

✗ import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin';

This package does not provide ESM exports; use CommonJS require. No default export for ES modules.

ImageminWebpWebpackPlugin

✓ import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin';

✗ import { ImageminWebpWebpackPlugin } from 'imagemin-webp-webpack-plugin';

Named import will fail; the plugin only has a default export in CommonJS. ESM import may need a default interop.

Plugin configuration

✓ new ImageminWebpWebpackPlugin({ config: [{ test: /\.(jpe?g|png)/, options: { quality: 75 } }] })

✗ new ImageminWebpWebpackPlugin({ quality: 75 })

Options must be nested inside config array items; top-level quality is ignored. Each config object requires test and options.

Shows full plugin configuration with separate rules for JPEG/PNG and GIF images, including all available options.

// webpack.config.js const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin'); module.exports = { plugins: [ new ImageminWebpWebpackPlugin({ config: [ { test: /\.(jpe?g|png)/, options: { quality: 75 } }, { test: /\.gif/, options: { // imagemin-gif2webp options } } ], overrideExtension: true, detailedLogs: false, silent: false, strict: true }) ] };

Debug

Known issues

gotchaPlugin order matters: should be placed last in plugins array to ensure original images are processed.

fix

Always put ImageminWebpWebpackPlugin as the last plugin in your webpack config plugins array.

affects: >=3.0.0

gotchacss-loader@latest cannot resolve .webp imports before build time because .webp files do not exist yet.

fix

Use aliases or dynamic requires; refer to css-loader documentation for handling generated assets.

affects: >=3.0.0

breakingv3.0.0 complete rewrite changed plugin API; config structure and defaults may differ from v2.

fix

Upgrade to v3 and adjust config to new format (config array, overrideExtension, strict, etc.).

affects: <3.0.0

deprecatedSilent option overrides detailedLogs; setting silent: true disables all console output.

fix

Use silent: false to allow detailedLogs to work.

affects: >=3.2.1

gotchaoverrideExtension default is true, which replaces original extension; set to false to append .webp.

fix

Set overrideExtension: false if you want image.png.webp instead of image.webp.

affects: >=3.1.0

Errors

Common errors & fixes

Error: Cannot find module 'imagemin-webp'

Missing peer dependency imagemin-webp or imagemin-gif2webp not installed.

fix

npm install imagemin-webp imagemin-gif2webp --save-dev

TypeError: ImageminWebpWebpackPlugin is not a constructor

Incorrect import: using named import instead of default or incorrect module system.

fix

Use const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin'); or use default import with ES module interop.

Configuration error: 'config' is not defined

Options placed at top level instead of inside config array.

fix

Wrap options in config: [{ test: /regex/, options: {...} }]

Webpack build fails: '...' file. This file was not converted to WebP.

strict: true and an image failed conversion due to invalid format or corrupt file.

fix

Set strict: false to allow build to continue, or fix the problematic image file.

Upgrade

Version history

3.3.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/iampava/imagemin-webp-webpack-plugin ↗

packagehttps://www.npmjs.com/package/imagemin-webp-webpack-plugin ↗