Laravel Mix - Merge Manifest

This extension supports multi mix configration without overwriting the mix-manifest.json file. It merges new manifests into the existing one.

Usage

First, install the extension.

// Laravel Mix v5
npm install laravel-mix-merge-manifest@v1 --save-dev

// Laravel Mix v6
npm install laravel-mix-merge-manifest@v2 --save-dev

Then, require it within your webpack.mix.js file, like so:

1let mix = require('laravel-mix');
2
3require('laravel-mix-merge-manifest');
4
5mix
6    .js('resources/assets/js/app.js', 'public/js')
7    .less('resources/assets/less/app.less', 'public/css')
8    .mergeManifest();

Examples - Laravel Mix v6

Running Laravel Mix with different configurations

Laravel Mix only supports a global configuration. If you want to use diffent configurations - e.g. to provide a separate JS file for legacy browsers - you need to run mix multiple times with different configs.

1npx mix && npx mix --mix-config=webpack.legacy.mix.js

Your default configuration in webpack.mix.js could look like this:

1// ...
2mix.js('resources/assets/scripts/main.js', 'scripts')
3    .mergeManifest()
4// ...

And your legacy configuration in webpack.legacy.mix.js would use .mergeManifest():

1// ...
2mix
3    .babel({ ... }) // Different Babel Configuration
4    .js('resources/assets/scripts/main.js', 'scripts/main.legacy.js')
5    .mergeManifest()
6// ...

Extracting multiple vendors

1npx mix --mix-config=webpack.backoffice.mix.js && npx mix --mix-config=webpack.customers.mix.js

webpack.backoffice.mix.js

1mix
2    .js('resources/js/backoffice/backoffice.js', 'public/js/backoffice')
3    .extract(['jquery', 'bootstrap', 'lodash', 'popper.js'])
4    .mergeManifest()

webpack.customers.mix.js

1mix
2    .js('resources/js/customers/customers.js', 'public/js/customers')
3    .extract(['vue'])
4    .mergeManifest()

Source: How to Split Dependencies into Multiple Vendors using Laravel Mix