image-config-webpack-plugin

2.0.3 verified Sat Apr 25 auth: no javascript

Preset webpack plugin that configures loaders for image assets (png, jpg, gif, svg, webp) with best practices. Current version 2.0.3, stable, part of the common-config-webpack-plugin suite. It automatically adjusts loader configuration based on webpack mode (development/production), using file-loader and url-loader for inlining small images. Key differentiator: zero-config setup with sensible defaults for long-term caching (md5 content hash) and mode-aware behavior, reducing boilerplate compared to manual loader configuration. Requires webpack >=4.36.0 and Node >=10.

Common errors

error Error: Cannot find module 'file-loader' ↓

cause Missing required loader dependency file-loader is not installed.

fix

Run 'npm install --save-dev file-loader' to install the missing loader.

error Error: ImageConfigWebpackPlugin is not a constructor ↓

cause Import incorrectly using ES module syntax with a package that exports a CommonJS module.

fix

Use correct require: const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');

Warnings

breaking ImageConfigWebpackPlugin is a webpack plugin, not a loader. It must be added to the plugins array, not to the module.rules. ↓

fix Add instance to plugins array: plugins: [new ImageConfigWebpackPlugin()]

gotcha Plugin automatically adjusts behavior based on webpack mode. If mode is not set, it may default to 'production' leading to minified output and hashed filenames unexpectedly. ↓

fix Set webpack mode explicitly: mode: 'development' or mode: 'production'

gotcha The plugin expects file-loader and url-loader to be installed as peer dependencies, but it does not automatically install them. Missing loaders cause build failures. ↓

fix Install loaders: npm install --save-dev file-loader url-loader

Install

npm install image-config-webpack-plugin

yarn add image-config-webpack-plugin

pnpm add image-config-webpack-plugin

Imports

ImageConfigWebpackPlugin

wrong

import ImageConfigWebpackPlugin from 'image-config-webpack-plugin';

correct

const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');

This package does not ship ESM; use CommonJS require. No default export.

Quickstart

Minimal webpack configuration using ImageConfigWebpackPlugin to handle image assets with default settings.

const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new ImageConfigWebpackPlugin(),
  ],
};