How to minimize only changed images with imagemin-webpack-plugin?

Question

Im using imagemin-webpack-plugin to minimize images in my project. It only runs when I run npm build. But, each time i do that, it minimizes all the images over again, which is unnecessary. So, I want for it to just minimize the images that were changed. I've done it with gulp before but I'm new to webpack so I'm not really sure what to do.

Also, when I started using this plugin, I noticed that when I added a new image while I was developing, it wouldn't show up until I ran the build command. Not sure why that is, might be an unrelated problem...

const merge = require("webpack-merge");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const common = require("./webpack.common.js");

const imageminMozjpeg = require('imagemin-mozjpeg');
const CopyWebpackPlugin = require('copy-webpack-plugin');
var ImageminPlugin = require('imagemin-webpack-plugin').default


module.exports = merge(common, {
  mode: "production",

  output: {
    filename: "[name].[hash:5].js",
    chunkFilename: "[id].[hash:5].css"
  },

  plugins: [
    new CopyWebpackPlugin([{
      from: 'src/images/',
      to: 'images/'
    }]),
    new ImageminPlugin({ 
      test: /\.(jpe?g|png|gif|svg)$/i,
        pngquant: ({quality: 80}),
        plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
});

score 3 · Accepted Answer · answered Jul 24 '19 at 15:01

As of writing, you can use cacheFolder option for the plugin.

https://github.com/Klathmon/imagemin-webpack-plugin#optionscachefolder

new ImageminPlugin({
  cacheFolder: './.cache',
  // ...
})

Additionally you do not need to use CopyWebpackPlugin plugin, I find it redundant when the Imagemin plugin already has this in-built.

https://github.com/Klathmon/imagemin-webpack-plugin#optionsexternalimages

new ImageminPlugin({
  externalImages: {
    context: '.',
    sources: glob.sync('./src/images/**/*.{jpg,png}'),
    destination: 'images',
    fileName: '[path][name].[ext]'
  }
  // ...
})

is there a way, though, for imagemin to add the hash to the files? — Carlo, Feb 14 '20 at 16:02

How to minimize only changed images with imagemin-webpack-plugin?

1 Answers1