Laravel Mix conditional compile

Question

I have a Laravel project, and I want to add some lines for conditions. A file located in the project root folder named module_statuses.json contains JSON variables.

{
    "Module1": true,
    "Module2": true,
    "Module3": false,
}

Related to these boolean JSON variables, I want to add/update some lines to the end of the webpack.mix.js file like the following.

const mix = require('laravel-mix');
const tailwindcss = require("tailwindcss");
require('laravel-mix-merge-manifest');

mix.options({
    terser: {
        extractComments: false,
    }
})

mix.js('resources/js/app.js', 'public/js')
    .vue()

     // These 2 lines should be conditional from module_statuses.json ///////
    .js('Modules/Module1/src/Resources/assets/js/module1.js', 'public/js')
    .js('Modules/Module2/src/Resources/assets/js/module2.js', 'public/js')

    .extract()
    .sass("resources/sass/app.scss", "public/css")
    .copy(
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'public/webfonts'
    )
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")],
    })
    .version();

How can I make those lines conditional? Any idea?

Answer 1

First, require your JSON file to access the variables and their values. Then you can reference them easily like the following.

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-merge-manifest');
const status = require('./module_statuses.json');

mix.options({
    terser: {
        extractComments: false,
    }
})

mix.js('resources/js/app.js', 'public/js')
    .vue()

if (status.Module1) {
    mix.js('Modules/Module1/src/Resources/assets/js/module1.js', 'public/js')
}

if (status.Module2) {
    mix.js('Modules/Module2/src/Resources/assets/js/module2.js', 'public/js')
}

mix.extract()
    .sass('resources/sass/app.scss', 'public/css')
    .copy(
        'node_modules/@fortawesome/fontawesome-free/webfonts',
        'public/webfonts'
    )
    .options({
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    })
    .version();