webpack 多个源文件夹

Question

我是第一次使用 webpack，如果这是一个愚蠢的问题，我很抱歉。 我想使用 imagemin-webpack-plugin 但我在两个文件夹中有图像。 第一个是img，第二个是pages，但是问题是这些文件夹中的所有图像必须以相同的文件夹结构输出。 看看下面我的代码部分。 如何定义 imagemin-webpack-plugin 以从两个文件夹中读取并保存到这些文件夹中？

const ImageminPlugin = require('imagemin-webpack-plugin').default,
imageminMozjpeg = require('imagemin-mozjpeg'),
imageminSvgo = require('imagemin-svgo'),
glob = require('glob'),
path = require('path');

module.exports = {
    plugins: [
        new ImageminPlugin({
            externalImages: {
                context: '.',
                sources: glob.sync('img/**/*.{png,jpg,jpeg,gif,svg}'),
                destination: 'img',
                fileName: '../[path][name].[ext]'
            },
            pngquant: ({quality: '80-100'}),
            plugins: [
                imageminMozjpeg({quality: 80, progressive: true}),
                imageminSvgo()
            ],
            jpegtran: {progressive: true}
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '../[path][name].[ext]'
                        }
                    }
                ]
            },

        ]
    }
}

Answer 1

您可以简单地为不同的图像集多次包含该插件，并为每个图像应用不同的 imagemin 设置：

module.exports = {
    plugins: [
        new ImageminPlugin({
            externalImages: {
                context: '.',
                sources: glob.sync('img/**/*.{png,jpg,jpeg,gif,svg}'),
                destination: 'img',
                fileName: '../[path][name].[ext]'
            },
            pngquant: ({quality: '80-100'}),
            plugins: [
                imageminMozjpeg({quality: 80, progressive: true}),
                imageminSvgo()
            ],
            jpegtran: {progressive: true}
        }),
        new ImageminPlugin({
            externalImages: {
                context: '.',
                sources: glob.sync('pages/**/*.{png,jpg,jpeg,gif,svg}'),
                destination: 'img',
                fileName: '../[path][name].[ext]'
            },
            pngquant: ({quality: '80-100'}),
            plugins: [
                imageminMozjpeg({quality: 80, progressive: true}),
                imageminSvgo()
            ],
            jpegtran: {progressive: true}
        })
    ],
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '../[path][name].[ext]'
                        }
                    }
                ]
            },

        ]
    }
}

在此处查看文档。