imagemin-webpack-plugin

2.4.2 verified Sat Apr 25 auth: no javascript

Webpack plugin that compresses images using imagemin. Current stable version is 2.4.2, with v3.0.0-beta.0 available. It integrates imagemin into the Webpack build process, allowing automatic image optimization. Key differentiators: simple configuration, support for external images, size limits, and caching. Ships TypeScript types. Active development with a beta for v3.0.

Common errors

error Error: Cannot find module 'ImageminWebpackPlugin' ↓

cause Incorrect import syntax

fix

Use import ImageminWebpackPlugin from 'imagemin-webpack-plugin' (default import)

error TypeError: ImageminWebpackPlugin is not a constructor ↓

cause CommonJS require without .default

fix

Use const ImageminWebpackPlugin = require('imagemin-webpack-plugin').default

error Module not found: Error: Can't resolve 'imagemin-webpack-plugin' ↓

cause Package not installed

fix

Run npm install imagemin-webpack-plugin --save-dev

Warnings

breaking v3.0.0-beta.0 may have breaking changes; check changelog before upgrading. ↓

fix Review https://github.com/Klathmon/imagemin-webpack-plugin/issues/90

deprecated The 'filename' option for externalImages was added in v2.3.0; older versions ignored it. ↓

fix Upgrade to v2.3.0 or later to use filename option

gotcha npm users may not get the tunnel-agent fix from v2.1.2 because npm ignores resolutions field. ↓

fix Use yarn or manually upgrade tunnel-agent

breaking Webpack 4 support added in v2.1.0; earlier versions do not support Webpack 4. ↓

fix Upgrade to v2.1.0 or later for Webpack 4

gotcha Cache hashing changed in v2.1.1: now hashes file contents instead of filenames. ↓

fix Clear cache directory if upgrading from <=2.1.0

deprecated v2.4.0 bumped imagemin and plugins; older versions may have security issues. ↓

fix Upgrade to v2.4.0 or later

Install

npm install imagemin-webpack-plugin

yarn add imagemin-webpack-plugin

pnpm add imagemin-webpack-plugin

Imports

ImageminWebpackPlugin

wrong

const { ImageminWebpackPlugin } = require('imagemin-webpack-plugin')

correct

import ImageminWebpackPlugin from 'imagemin-webpack-plugin'

Default export; use default import or require with default property.

ImageminWebpackPlugin

wrong

const ImageminWebpackPlugin = require('imagemin-webpack-plugin')

correct

const ImageminWebpackPlugin = require('imagemin-webpack-plugin').default

CommonJS require must use .default for this package.

WebpackPluginInstance

import type { WebpackPluginInstance } from 'imagemin-webpack-plugin'

Type import available for TypeScript users.

Quickstart

Minimal webpack configuration using the plugin to compress images with pngquant, optipng, and jpegtran.

import ImageminWebpackPlugin from 'imagemin-webpack-plugin';
import { Configuration } from 'webpack';

const config: Configuration = {
  entry: './src/index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js',
  },
  plugins: [
    new ImageminWebpackPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      pngquant: { quality: '65-80' },
      optipng: { optimizationLevel: 3 },
      jpegtran: { progressive: true },
    }),
  ],
};

export default config;