Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

76
Vistas
Webpack5 how to minimize copying assets such as images

I have following webpack.config.js file, from this configuration I managed to compress all images which are consumed from css files.

But I also want to compress all images which I'm copying into dist folder.

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
 module: {
    rules: [

        {
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
        },

        {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [
                'file-loader',
                {
                    loader: 'image-webpack-loader',
                    options: {
                        mozjpeg: {
                            progressive: true,
                        },
                        // optipng.enabled: false will disable optipng
                        optipng: {
                            enabled: false,
                        },
                        pngquant: {
                            quality: [0.65, 0.90],
                            speed: 4
                        },
                        gifsicle: {
                            interlaced: false,
                        },
                        // the webp option will enable WEBP
                        webp: {
                            quality: 75
                        }
                    }
                },
            ],
        }
    ],
},
plugins: [
    // copying static assets to dist directory, i want these images to be compressed as well
    new CopyPlugin({
        patterns: [{
                from: "source/images",
                to: "images"
            } 
        ],
    })
]};

How can I achieve this in webpack 5?

I saw this nice article (https://web.dev/codelab-imagemin-webpack/) explaining how this can be achieved but as it seems imagemin-webpack-plugin is not updated recently.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda