Я использую imagemin-webpack-plugin для минимизации изображений в моем проекте.Он запускается только тогда, когда я запускаю npm build.
Но каждый раз, когда я это делаю, он снова минимизирует все изображения, что не нужно.Итак, я хочу, чтобы он просто минимизировал изображения, которые были изменены.Я делал это раньше, но я новичок в вебпаке, поэтому я не совсем уверен, что делать.
Кроме того, когда я начал использовать этот плагин, я заметил, что когда я добавляю новый образ во время разработки, он не будет отображаться, пока я не выполню команду сборки.Не уверен, почему это может быть не связанной проблемой ...
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})]
})
]
});