如何使用imagemin-webpack-plugin最小化僅更改的圖像？

Question

我使用imagemin-webpack-plugin來最小化項目中的圖像。 它只在我運行npm build.時運行npm build. 但是，每次我這樣做，它會使所有圖像再次最小化，這是不必要的。 因此，我希望它能夠最大限度地減少已更改的圖像。 之前我已經用gulp完成了，但我是webpack的新手，所以我不確定該怎么做。

此外，當我開始使用這個插件時，我注意到當我在開發時添加新圖像時，在我運行構建命令之前它不會顯示。 不知道為什么會這樣，可能是一個無關的問題......

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})]
    })
  ]
});

Answer 1

在編寫時，您可以為插件使用cacheFolder選項。

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

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

此外，您不需要使用CopyWebpackPlugin插件，當Imagemin插件已經內置時，我發現它是多余的。

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]'
  }
  // ...
})