Registry / devops / image-webpack-loader

image-webpack-loader

library8.1.0jsnpmunverified

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.

devops web-framework

npm install image-webpack-loader

github ↗package ↗

INSTALL

IMPORT

SIG · IMAGE-WEBPACK-LOAD

image-webpack-loader

devopsjavascriptv8.1.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.

image-webpack-loader

✓ import imageWebpackLoader from 'image-webpack-loader'

✗ const imageWebpackLoader = require('image-webpack-loader')

ESM default import works; CommonJS require also works, but import is preferred for webpack

image-webpack-loader (as rule)

✓ use: ['file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: {} } }]

✗ use: 'image-webpack-loader'

Must be chained after file-loader or url-loader to output files

disable option

✓ options: { disable: true }

✗ options: { bypassOnDebug: true }

bypassOnDebug is for webpack 1.x; use disable for webpack 2+

Configures webpack to minify images with image-webpack-loader, chained after file-loader, with custom options for each optimizer.

const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.(gif|png|jpe?g|svg)$/i, use: [ 'file-loader', { loader: 'image-webpack-loader', options: { mozjpeg: { progressive: true, quality: 65 }, optipng: { enabled: false }, pngquant: { quality: [0.65, 0.90], speed: 4 }, gifsicle: { interlaced: false }, webp: { quality: 75 }, }, }, ], }, ], }, };

Debug

Known issues

gotchaMust be chained after file-loader or url-loader; otherwise images won't be emitted.

fix

Add 'file-loader' before 'image-webpack-loader' in the use array.

affects: >=1.0.0

breakingUpgrading from webpack 1 to webpack 2+: 'bypassOnDebug' option is renamed to 'disable'.

fix

Use options: { disable: true } instead of bypassOnDebug.

affects: >=2.0.0

deprecatedimagemin-webp has engine constraints; it may fail on systems without libwebp.

fix

Ensure libwebp is installed or disable webp optimizer.

affects: >=6.0.0

gotchaNode.js 12 is required for native modules compilation; may fail on newer or older versions.

fix

Use Node 12 LTS; for other versions, consider using image-minimizer-webpack-plugin.

affects: >=8.0.0

breakingImagemin plugins are native; they require compilation with node-gyp. Failure may occur on missing build tools.

fix

Install build tools: on macOS 'xcode-select --install', on Ubuntu 'apt-get install build-essential'.

affects: >=7.0.0

gotchaSVGO may remove viewBox; if you rely on viewBox for responsive SVGs, disable SVGO.

fix

Set options: { svgo: { plugins: [{ removeViewBox: false }] } } or disabled: true.

affects: >=1.0.0

Errors

Common errors & fixes

Module build failed: Error: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib

Missing libpng dependency on macOS.

fix

Run 'brew install libpng'.

Error: Cannot find module 'imagemin'

imagemin not installed or deduped incorrectly.

fix

Run 'npm install image-webpack-loader --save-dev' again, or manually install imagemin.

ValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Using 'bypassOnDebug' with webpack 2+.

fix

Replace with options: { disable: true }.

Error: The package "image-webpack-loader" is a loader that must be used with a matching file-loader or url-loader.

Misconfigured webpack rule without file-loader before image-webpack-loader.

fix

Add 'file-loader' to the use array before 'image-webpack-loader'.

Upgrade

Version history

8.1.0latest on npm

Audit

Dependencies

imageminrequiredCore optimization library

loader-utilsrequiredWebpack utility for loader options

schema-utilsrequiredValidation of loader options

file-loaderoptionalTypically chained together to emit image files

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/tcoopman/image-webpack-loader ↗

packagehttps://www.npmjs.com/package/image-webpack-loader ↗