Ability to set a custom webpack.mix.js

• Laravel Mix Version: 0.9.0
• Node Version 6.10.0
• NPM Version 4.2.0
• OS: Mac OS

Description:

This is a request to be able to specify a custom webpack.mix.js file at runtime. for example

It’s important to note that this change is transparent and has no BC breaks. if you don’t explicitly use it, it won’t make any difference.

// this will load the webpack.mix.js
npm run dev

// the following will look for a custom.mix.js file instead of the webpack.mix.js file
// if not found it wont error just like webpack.mix.js works
npm run dev -- --env.mixfile=custom.mix

This allows cases where there are more than one site to compile assets for.

For example, in our case we have 4 sites, each has it’s own compile process and code, we have everything in webpack.mix.js file, however, it most cases when we release we only want to compile one site not all of them. This change will allow us to split webpack.mix.js into multiple files and call the one we need at the time.

PR is being submitted.

[QWp6t]

For your specific use case, you could already do this if you want. Use webpack.mix.js as a single point of entry for Mix, but then pass an env flag as you mentioned.

Given that you have multiple webpack.mix.js files that each correspond to different sites, e.g.,

├── webpack.mix.js        # → Mix entrypoint
├── webpack.mix.site1.js  # → Mix for site1
├── webpack.mix.site2.js  # → Mix for site2
├── webpack.mix.site3.js  # → Mix for site3
└── webpack.mix.site4.js  # → Mix for site4

And you can pass an environment variable to node, e.g.,

npm run dev -- --env.site=site1

Then webpack.mix.js could have something like:

const { mix } = require('laravel-mix');
const { env } = require('minimist')(process.argv.slice(2));

/* do stuff with mix that's common to all sites, like maybe mix.options() */

// load site-specific config
if (env && env.site) {
    require(`${__dirname}/webpack.mix.${env.site}.js`);
}

And webpack.mix.site1.js, site2, site3, etc. could be normal mix config files:

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/site1/js')
   .sass('resources/assets/sass/app.scss', 'public/site1/css');

I’m using minimist and sniffing out the --env argument, but as an alternative, you could use cross-env combined with process.env. (Another way of doing it would be to use your own webpack.config.js and export it as a function, but it would require a number of extra steps that make it not worth the effort.)

[lukas-pierce]

The modern solution use --mix-config option:

Using in CLI:

mix --mix-config=webpack-custom.mix.js

Example package.json

{
  "scripts": {
    "dev": "mix", // it will use default webpack.mix.js file
    "dev-custom": "mix --mix-config=webpack-custom.mix.js"
  }
}

Official docs here