Webpack5 如何最小化复制图片等资产答案

【问题标题】：Webpack5 how to minimize copying assets such as imagesWebpack5 如何最小化复制图片等资产
【发布时间】：2022-09-30 05:40:41
【问题描述】：

我有以下webpack.config.js文件，从这个配置中，我设法压缩了从 css 文件中使用的所有图像。

但我也想压缩我复制到 dist 文件夹的所有图像。

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\"
            } 
        ],
    })
]};

如何在 webpack 5 中实现这一点？

我看到这篇不错的文章 (https://web.dev/codelab-imagemin-webpack/) 解释了如何实现这一点，但似乎 imagemin-webpack-plugin 最近没有更新。

标签： javascript webpack webpack-5 copy-webpack-plugin

【解决方案1】：

我可以通过使用copy-webpack-plugin 和image-minimizer-webpack-plugin 最小化器来完成这项工作。我的配置看起来像这样。

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


module.exports = {
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: 'path/to/images/*',
                    to({ context, absoluteFilename }) {
                        return "dest/[name][ext]";
                    }
                },
            ],
        }),
    ],
    optimization: {
        minimizer: [
            new ImageMinimizerPlugin({
                loader: true,
                minimizer: {
                    implementation: ImageMinimizerPlugin.imageminMinify,
                    options: {
                        plugins: [
                            "imagemin-gifsicle",
                            "imagemin-mozjpeg",
                            "imagemin-pngquant",
                            "imagemin-svgo",
                        ],
                    },
                },
                generator: [
                    {
                        type: "asset",
                        implementation: ImageMinimizerPlugin.imageminGenerate,
                        options: {
                            plugins: [
                                "imagemin-gifsicle",
                                "imagemin-mozjpeg",
                                "imagemin-pngquant",
                                "imagemin-svgo",
                            ],
                        },
                    },
                ],
            }),
        ],
    },
}

这部分文档让我找到了这个解决方案。 https://webpack.js.org/plugins/image-minimizer-webpack-plugin/#generate-webp-images-from-copied-assets

【讨论】：