multiple webpack.mix.js

multiple_mix.md

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.