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]'                        }                    }                ]            },        ]    }}