You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
2.0 KiB
81 lines
2.0 KiB
# 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:
|
|
|
|
```js
|
|
let mix = require('laravel-mix');
|
|
|
|
require('laravel-mix-merge-manifest');
|
|
|
|
mix
|
|
.js('resources/assets/js/app.js', 'public/js')
|
|
.less('resources/assets/less/app.less', 'public/css')
|
|
.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.
|
|
|
|
```sh
|
|
npx mix && npx mix --mix-config=webpack.legacy.mix.js
|
|
```
|
|
|
|
Your default configuration in `webpack.mix.js` could look like this:
|
|
```js
|
|
// ...
|
|
mix.js('resources/assets/scripts/main.js', 'scripts')
|
|
.mergeManifest()
|
|
// ...
|
|
```
|
|
|
|
And your legacy configuration in `webpack.legacy.mix.js` would use `.mergeManifest()`:
|
|
```js
|
|
// ...
|
|
mix
|
|
.babel({ ... }) // Different Babel Configuration
|
|
.js('resources/assets/scripts/main.js', 'scripts/main.legacy.js')
|
|
.mergeManifest()
|
|
// ...
|
|
```
|
|
|
|
|
|
### Extracting multiple vendors
|
|
|
|
```sh
|
|
npx mix --mix-config=webpack.backoffice.mix.js && npx mix --mix-config=webpack.customers.mix.js
|
|
```
|
|
|
|
`webpack.backoffice.mix.js`
|
|
```js
|
|
mix
|
|
.js('resources/js/backoffice/backoffice.js', 'public/js/backoffice')
|
|
.extract(['jquery', 'bootstrap', 'lodash', 'popper.js'])
|
|
.mergeManifest()
|
|
```
|
|
|
|
`webpack.customers.mix.js`
|
|
```js
|
|
mix
|
|
.js('resources/js/customers/customers.js', 'public/js/customers')
|
|
.extract(['vue'])
|
|
.mergeManifest()
|
|
```
|
|
|
|
Source: [How to Split Dependencies into Multiple Vendors using Laravel Mix](https://www.compulsivecoders.com/tech/how-to-build-multiple-vendors-using-laravel-mix/)
|
|
|