image-config-webpack-plugin

Creating a webpack loader configurations can be quite time consuming.
The image-config-webpack-plugin is part of the common-config-webpack-plugin suite which tries to provide best practices for the most common loader requirements.

If no mode is explicitly set for the plugin the configuration will adjust depending on your webpack mode setting.
⚙️development mode webpack.config.js ⚙️production mode webpack.config.js

Installation

npm i --save-dev image-config-webpack-plugin

Webpack Config

In most projects you will need to set up project specific options but you can still use all or some common-config-webpack-plugin parts.

const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
module.exports = {
  plugins: [new ImageConfigWebpackPlugin()],
};

Changing the image file name

By default the image-config-webpack-plugin adds a md5 hash of the image files content to the file name to allow long-term-caching.

For example: static/media/burger.c8ffdeb3.png

To change the file name path an option called name can be passed to the image-config-webpack-plugin.
The name option supports different placeholders.

const ImageConfigWebpackPlugin = require('image-config-webpack-plugin');
module.exports = {
  plugins: [
    new ImageConfigWebpackPlugin({
      name: 'media/[ext]/[name].[hash:7].[ext]',
    }),
  ],
};