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

Question

我正在使用 imagemin-webpack-plugin 来最小化我项目中的图像。它只有运行s 当我运行 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]'
  }
  // ...
})

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

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

javascript

webpack

imagemin