Multiple contexts

[xavi7th]

I just discovered this plugin and it is a great piece. 🤩

I am having a little problem however. How do I specify multiple contexts?

let fs = require('fs-extra');
let modules = fs.readdirSync('./main/app/Modules');
const mix = require('laravel-mix');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

require('laravel-mix-imagemin');
mix.setPublicPath('./public_html');

if (modules && modules.length > 0) {
    modules.forEach((module) => {
        let path = `./main/app/Modules/${module}/webpack.mix.js`;
        if (fs.existsSync(path)) {
            require(path);
        }
    });
}

mix.options({
        fileLoaderDirs: {
            images: 'img'
        },
        postCss: [
      require('postcss-fixes')()
    ],
    })
    .mergeManifest()
    .imagemin(

        [{
            from: 'img/**/**.*',
            to: 'img/'
     }], {
            context: './main/app/Modules/**/Resources',
        }, {
            optipng: {
                optimizationLevel: 4
            },
            jpegtran: null,
            plugins: [
                require('imagemin-mozjpeg')({
                    quality: 75,
                    progressive: true,
                }),
            ],
        }
    );

This above is my webpack file. As you see from the first lines I have multiple "modules" containing their individual source files.

I am trying to process the images in the different folders into the public images folder. How could I go about this?

I have tried

[{
            from: 'PublicPages/img/**/**.*',
            to: 'img/',
     }], {
            context: './main/app/Modules',
    }

But this createsimg/PublicPages/img/* in my public directory.

Any help would be appreciated

[thienanblog]

Use transformPath in CopyPlugin and you have to replace these duplicated paths with empty string so it can work as you want.

[xavi7th]

@thienanblog thanks for your reply. Could you please help with a sample code of how I could do this? Or a pointer in the right direction. I am still stumped with this. Thanks.

[thienanblog]

This is my sample code when using Imagemin for 2 Modules Admin and Frontend.

Imagemin's first argument is CopyPlugin so you can rewrite the directory's path.

        let imageFolders = [];
        ["admin", "frontend"].map(val => {
            ["default", "microsite"].map(theme => {
                imageFolders.push({
                    from: `resources/themes/${val}/${theme}/assets/images/**/*`,
                    to: `themes/${val}/${theme}/assets/images`,
                    transformPath(targetPath, absolutePath) {
                        return targetPath.replace(
                            path.join(
                                "resources",
                                "themes",
                                val,
                                theme,
                                "assets",
                                "images"
                            ),
                            ""
                        );
                    }
                });
            });
        });

        mix.imagemin(
            imageFolders,
            {},
            {
                pngquant: {
                    quality: "70-90"
                },
                optipng: null,
                jpegtran: null,
                plugins: [
                    require("imagemin-mozjpeg")({
                        quality: 85,
                        progressive: true
                    }),
                    require("imagemin-svgo")({
                        plugins: [
                            {removeViewBox: false}
                        ]
                    })
                ]
            }
        );