{"id":20124,"library":"image-webpack-loader","title":"image-webpack-loader","description":"Webpack loader that minifies PNG, JPEG, GIF, SVG and WEBP images using imagemin. Version 8.1.0 bundles optimizers for mozjpeg, optipng, pngquant, svgo, gifsicle, and optionally webp. Active development, new releases every few months. Key differentiator: seamless integration with webpack pipeline, automatic optimization on build. Compared to standalone imagemin, this plugin integrates directly into the webpack build process and allows per-rule configuration.","status":"active","version":"8.1.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/tcoopman/image-webpack-loader","tags":["javascript"],"install":[{"cmd":"npm install image-webpack-loader","lang":"bash","label":"npm"},{"cmd":"yarn add image-webpack-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add image-webpack-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core optimization library","package":"imagemin","optional":false},{"reason":"Webpack utility for loader options","package":"loader-utils","optional":false},{"reason":"Validation of loader options","package":"schema-utils","optional":false},{"reason":"Typically chained together to emit image files","package":"file-loader","optional":true}],"imports":[{"note":"ESM default import works; CommonJS require also works, but import is preferred for webpack","wrong":"const imageWebpackLoader = require('image-webpack-loader')","symbol":"image-webpack-loader","correct":"import imageWebpackLoader from 'image-webpack-loader'"},{"note":"Must be chained after file-loader or url-loader to output files","wrong":"use: 'image-webpack-loader'","symbol":"image-webpack-loader (as rule)","correct":"use: ['file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: {} } }]"},{"note":"bypassOnDebug is for webpack 1.x; use disable for webpack 2+","wrong":"options: { bypassOnDebug: true }","symbol":"disable option","correct":"options: { disable: true }"}],"quickstart":{"code":"const path = require('path');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: {\n    filename: 'bundle.js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(gif|png|jpe?g|svg)$/i,\n        use: [\n          'file-loader',\n          {\n            loader: 'image-webpack-loader',\n            options: {\n              mozjpeg: { progressive: true, quality: 65 },\n              optipng: { enabled: false },\n              pngquant: { quality: [0.65, 0.90], speed: 4 },\n              gifsicle: { interlaced: false },\n              webp: { quality: 75 },\n            },\n          },\n        ],\n      },\n    ],\n  },\n};","lang":"javascript","description":"Configures webpack to minify images with image-webpack-loader, chained after file-loader, with custom options for each optimizer."},"warnings":[{"fix":"Add 'file-loader' before 'image-webpack-loader' in the use array.","message":"Must be chained after file-loader or url-loader; otherwise images won't be emitted.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use options: { disable: true } instead of bypassOnDebug.","message":"Upgrading from webpack 1 to webpack 2+: 'bypassOnDebug' option is renamed to 'disable'.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure libwebp is installed or disable webp optimizer.","message":"imagemin-webp has engine constraints; it may fail on systems without libwebp.","severity":"deprecated","affected_versions":">=6.0.0"},{"fix":"Use Node 12 LTS; for other versions, consider using image-minimizer-webpack-plugin.","message":"Node.js 12 is required for native modules compilation; may fail on newer or older versions.","severity":"gotcha","affected_versions":">=8.0.0"},{"fix":"Install build tools: on macOS 'xcode-select --install', on Ubuntu 'apt-get install build-essential'.","message":"Imagemin plugins are native; they require compilation with node-gyp. Failure may occur on missing build tools.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Set options: { svgo: { plugins: [{ removeViewBox: false }] } } or disabled: true.","message":"SVGO may remove viewBox; if you rely on viewBox for responsive SVGs, disable SVGO.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'brew install libpng'.","cause":"Missing libpng dependency on macOS.","error":"Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib"},{"fix":"Run 'npm install image-webpack-loader --save-dev' again, or manually install imagemin.","cause":"imagemin not installed or deduped incorrectly.","error":"Error: Cannot find module 'imagemin'"},{"fix":"Replace with options: { disable: true }.","cause":"Using 'bypassOnDebug' with webpack 2+.","error":"ValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Add 'file-loader' to the use array before 'image-webpack-loader'.","cause":"Misconfigured webpack rule without file-loader before image-webpack-loader.","error":"Error: The package \"image-webpack-loader\" is a loader that must be used with a matching file-loader or url-loader."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}