Laravel-mix: Alternative mix files

[rosshulford]

At the moment my app consist of about 10 js files compiles by laravel mix

I have

• an admin area
• the main app
• some signup forms

this is fine however at the moment if I am running a build and I only want the forms for example I have to manually comment out the lines I do not want in my webpack.mix.js.

Ideally I would like npm run watch to run the full app BUT I would like to setup alternative mix files so I could run

npm run app
npm run forms
npm run admin

The whole idea is to get a 3 or 4 second build down to 1s or less.

Thanks.

[neeravp]

I have a similar setup, wherein I load different main entry files for the admin area and the main app.
I use the following setup:

    //webpack.mix.js . 

    if (process.env.section) {
        require(`${__dirname}/webpack.mix.${process.env.section}.js`);
      }

Then a separate webpack.mix.admin.js for the the admin area

    //webpack.mix.admin.js 
    let mix = require("laravel-mix");

    mix.js(...)
          .extract(....)
         .sass( ... )

Then a separate webpack.mix.main.js for the the main area

    //webpack.mix.main.js 
        let mix = require("laravel-mix");

        mix.js(...)
              .extract(....)
              .sass( ... )

And change the package.json file to allow the webpack.min.js file to pick the right file i.e. either webpack.mix.admin.js or webpack.mix.main.js. Add process.env.section=main or process.env.section.admin to the respective commands

    "dev": "npm run development",
    "development": "cross-env process.env.section=main NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env process.env.section=main NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env process.env.section=main NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-dev": "npm run admin-development",
    "admin-development": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-watch": "npm run dash-development -- --watch",
    "admin-watch-poll": "npm run admin-watch -- --watch-poll",
    "admin-hot": "cross-env process.env.section=admin NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "admin-prod": "npm run admin-production",
    "admin-production": "cross-env process.env.section=admin NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

Now when working in the main section you can run the normal npm run dev or npm run watch .
While when working in the admin section you can run npm run admin-dev or npm run admin-watch .
Hope this is what you are looking for.

[mcchrish]

Note that the manifest file will be reset/refresh whenever any one of the SPA will run. So you can't use mix in blade templates. You have to use asset instead which have some downsides.

ref: https://github.com/JeffreyWay/laravel-mix/issues/1949

[elliottregan]

@mcchrish What are the downsides, and what did you do to get around them?

[mcchrish]

You may not be able to use versioning https://laravel.com/docs/5.8/mix#versioning-and-cache-busting

We opt to using the same mix build config just with a different entry for the app and the admin instead of having separate mix configs and build scripts.

[shrekuu]

@mcchrish Well, I guess you can use laravel-mix-merge-manifest to avoid resetting manifest file.

[zsoltgyure]

You can solve the versioning issue like this:

mix.version(['public/js/vendor.js', 'public/js/app.js', 'public/css/app.css']);

So you pass an array of files you want to version.