Mix extract with multiple files

I also have this issue. I can't separate backend from frontend when extracting o versioning assets...

After some small research I'm now using two mix config files which are included depending on environment variable and then switched inside custom webpack.config.js with modified Paths:

webpack.config.js

Paths.mix = () => {
    return Paths.root(process.env.MIX_CONFIG);
};

package.json

"scripts": {
    "admin-dev": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=admin.mix NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
    "admin-watch": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=admin.mix NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js",
    "admin-hot": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=admin.mix NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js",
    "admin-production": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=admin.mix NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=frontend.mix NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=frontend.mix NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=frontend.mix NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=webpack.config.js",
    "production": "node node_modules/cross-env/dist/bin/cross-env.js MIX_CONFIG=frontend.mix NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=webpack.config.js"
  },

admin.mix.js (new config file instead of default webpack.mix.js)

mix
  .setPublicPath(__dirname + '/public/assets/admin')

admin-layout.blade.php

<link rel="stylesheet" href="{{ mix('css/vendor.css', 'assets/admin') }}" />

frontend.mix.js (new config file instead of default webpack.mix.js)

mix
  .setPublicPath(__dirname + '/public/assets/frontend')

frontend-layout.blade.php

<link rel="stylesheet" href="{{ mix('css/vendor.css', 'assets/frontend') }}" />

Hello @gorodezkiy ,

Currently running the latest version of mix 1.4.2, I get an issue with what you suggests...

In fact, I can't get it to work, and it's related to my custom webpack.config.js

I tried to create mine from the main one and just update the require() lines and the path to point at the right libraries, but it always load the webpack.mix and never my MIX_CONFIG designated files.

Could you help me there ?

Thanks

Hello @FrancoisH ,

I forgot to mention, that I've published custom webpack.config.js ( from the /node_modules/laravel-mix/setup/webpack.config.js ) to the root app folder near the package.json ( as described in the docs https://laravel.com/docs/5.5/mix#custom-webpack-configuration ) and added

Paths.mix = () => {
    return Paths.root(process.env.MIX_CONFIG);
};

right after require section

Doesnt work in 5.6.

After copying the webpack.config.js you have to alter the require paths as well.

I suggest people dont go this way.. it feels hacky. Once an update will be available things will break and you forgot how you fixed them in earlier versions.

For those coming from google..

I took a closer look.. I found out Paths.js has a mix function:

    mix() {
        return this.root(
            argv.env && argv.env.mixfile ? argv.env.mixfile : 'webpack.mix'
        );
    }

So we simply add an extra parameter to the package.json line:

"admin-dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=admin.mix.js --progress --hide-modules --config=webpack.config.js"

create the file admin.mix.js in the root and it works like a charm!

@COLIN - yeah, it works like a charm! thank very much, you save my day