CODEWITHSUNDEEP
javascriptnode.jswebpack
mcgoo
mcgoo

Reputation: 103

webpack Multiple folders of sources

I'm working with webpack for the first time, so sorry if this is a silly question. I want to use imagemin-webpack-plugin but I have images in two folders. The first is img and the second is pages, however problem is that all images in these folders must be outputted in the same folder structure. Have a look below my portion of the code. How can I define imagemin-webpack-plugin to read from two folders and save to these folders?

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

        ]
    }
}

Upvotes: 1

Views: 383

Answers (1)

Alexander Belokon
Alexander Belokon

Reputation: 1522

You can simply include the plugin multiple times for different sets of images and apply different imagemin settings to each:

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

        ]
    }
}

Check the documentation here.

Upvotes: 1

Related Questions