Блог

Я использую imagemin-webpack-plugin для минимизации изображений в моем проекте. Он запускается только при запуске 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})]
    })
  ]
});
  

На момент написания вы можете использовать cacheFolder option для плагина.

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