{"id":20123,"library":"image-config-webpack-plugin","title":"image-config-webpack-plugin","description":"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.","status":"active","version":"2.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/merkle-open/webpack-config-plugins","tags":["javascript","image","webpack","loader"],"install":[{"cmd":"npm install image-config-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add image-config-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add image-config-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; plugin works as a webpack plugin","package":"webpack","optional":false}],"imports":[{"note":"This package does not ship ESM; use CommonJS require. No default export.","wrong":"import ImageConfigWebpackPlugin from 'image-config-webpack-plugin';","symbol":"ImageConfigWebpackPlugin","correct":"const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');"}],"quickstart":{"code":"const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  mode: 'development',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  plugins: [\n    new ImageConfigWebpackPlugin(),\n  ],\n};","lang":"javascript","description":"Minimal webpack configuration using ImageConfigWebpackPlugin to handle image assets with default settings."},"warnings":[{"fix":"Add instance to plugins array: plugins: [new ImageConfigWebpackPlugin()]","message":"ImageConfigWebpackPlugin is a webpack plugin, not a loader. It must be added to the plugins array, not to the module.rules.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Set webpack mode explicitly: mode: 'development' or mode: 'production'","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install loaders: npm install --save-dev file-loader url-loader","message":"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.","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 'npm install --save-dev file-loader' to install the missing loader.","cause":"Missing required loader dependency file-loader is not installed.","error":"Error: Cannot find module 'file-loader'"},{"fix":"Use correct require: const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');","cause":"Import incorrectly using ES module syntax with a package that exports a CommonJS module.","error":"Error: ImageConfigWebpackPlugin is not a constructor"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}