{"id":20126,"library":"imagemin-webp-webpack-plugin","title":"imagemin-webp-webpack-plugin","description":"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.","status":"active","version":"3.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/iampava/imagemin-webp-webpack-plugin","tags":["javascript","webpack","plugin","webp","imagemin","images"],"install":[{"cmd":"npm install imagemin-webp-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add imagemin-webp-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add imagemin-webp-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package does not provide ESM exports; use CommonJS require. No default export for ES modules.","wrong":"import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin';","symbol":"ImageminWebpWebpackPlugin","correct":"const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');"},{"note":"Named import will fail; the plugin only has a default export in CommonJS. ESM import may need a default interop.","wrong":"import { ImageminWebpWebpackPlugin } from 'imagemin-webp-webpack-plugin';","symbol":"ImageminWebpWebpackPlugin","correct":"import ImageminWebpWebpackPlugin from 'imagemin-webp-webpack-plugin';"},{"note":"Options must be nested inside config array items; top-level quality is ignored. Each config object requires test and options.","wrong":"new ImageminWebpWebpackPlugin({ quality: 75 })","symbol":"Plugin configuration","correct":"new ImageminWebpWebpackPlugin({ config: [{ test: /\\.(jpe?g|png)/, options: { quality: 75 } }] })"}],"quickstart":{"code":"// webpack.config.js\nconst ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');\n\nmodule.exports = {\n  plugins: [\n    new ImageminWebpWebpackPlugin({\n      config: [\n        {\n          test: /\\.(jpe?g|png)/,\n          options: {\n            quality: 75\n          }\n        },\n        {\n          test: /\\.gif/,\n          options: {\n            // imagemin-gif2webp options\n          }\n        }\n      ],\n      overrideExtension: true,\n      detailedLogs: false,\n      silent: false,\n      strict: true\n    })\n  ]\n};","lang":"javascript","description":"Shows full plugin configuration with separate rules for JPEG/PNG and GIF images, including all available options."},"warnings":[{"fix":"Always put ImageminWebpWebpackPlugin as the last plugin in your webpack config plugins array.","message":"Plugin order matters: should be placed last in plugins array to ensure original images are processed.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Use aliases or dynamic requires; refer to css-loader documentation for handling generated assets.","message":"css-loader@latest cannot resolve .webp imports before build time because .webp files do not exist yet.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Upgrade to v3 and adjust config to new format (config array, overrideExtension, strict, etc.).","message":"v3.0.0 complete rewrite changed plugin API; config structure and defaults may differ from v2.","severity":"breaking","affected_versions":"<3.0.0"},{"fix":"Use silent: false to allow detailedLogs to work.","message":"Silent option overrides detailedLogs; setting silent: true disables all console output.","severity":"deprecated","affected_versions":">=3.2.1"},{"fix":"Set overrideExtension: false if you want image.png.webp instead of image.webp.","message":"overrideExtension default is true, which replaces original extension; set to false to append .webp.","severity":"gotcha","affected_versions":">=3.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install imagemin-webp imagemin-gif2webp --save-dev","cause":"Missing peer dependency imagemin-webp or imagemin-gif2webp not installed.","error":"Error: Cannot find module 'imagemin-webp'"},{"fix":"Use const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin'); or use default import with ES module interop.","cause":"Incorrect import: using named import instead of default or incorrect module system.","error":"TypeError: ImageminWebpWebpackPlugin is not a constructor"},{"fix":"Wrap options in config: [{ test: /regex/, options: {...} }]","cause":"Options placed at top level instead of inside config array.","error":"Configuration error: 'config' is not defined"},{"fix":"Set strict: false to allow build to continue, or fix the problematic image file.","cause":"strict: true and an image failed conversion due to invalid format or corrupt file.","error":"Webpack build fails: '...' file. This file was not converted to WebP."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}