Javascript 如何使用imagemin网页包插件最小化仅更改的图像?
我使用imagemin网页包插件最小化我项目中的图像。它只在我运行npm build时运行。但是,每次我这样做时,它都会再次最小化所有图像,这是不必要的。所以,我想让它最小化被改变的图像。我以前用过gulp,但我对webpack是新手,所以我不确定该怎么做 另外,当我开始使用这个插件时,我注意到当我在开发过程中添加一个新的图像时,它在我运行build命令之前不会显示。不知道为什么,可能是一个无关的问题Javascript 如何使用imagemin网页包插件最小化仅更改的图像?,javascript,webpack,imagemin,Javascript,Webpack,Imagemin,我使用imagemin网页包插件最小化我项目中的图像。它只在我运行npm build时运行。但是,每次我这样做时,它都会再次最小化所有图像,这是不必要的。所以,我想让它最小化被改变的图像。我以前用过gulp,但我对webpack是新手,所以我不确定该怎么做 另外,当我开始使用这个插件时,我注意到当我在开发过程中添加一个新的图像时,它在我运行build命令之前不会显示。不知道为什么,可能是一个无关的问题 const merge = require("webpack-merge"); const U
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})]
})
]
});
在撰写本文时,您可以使用插件的
cacheFolder
选项
此外,您不需要使用CopyWebpackPlugin
plugin,当Imagemin插件已经内置了这个插件时,我发现它是多余的
但是,imagemin有没有办法将散列添加到文件中?这不就是[hash]吗?
new ImageminPlugin({
cacheFolder: './.cache',
// ...
})
new ImageminPlugin({
externalImages: {
context: '.',
sources: glob.sync('./src/images/**/*.{jpg,png}'),
destination: 'images',
fileName: '[path][name].[ext]'
}
// ...
})