Laravel-mix: Automatically extract all vendors current/future?

Created on 12 Mar 2018  路  21Comments  路  Source: JeffreyWay/laravel-mix

With the following, we have to manually type out each and every vendor, and if you add more vendors down the line, you must add them here too. But I was wondering if it's possible to "automatically" get a list of all vendors (now/future) and extract them in one go?

// webpack.mix.js

...

.js('resources/assets/js/app.js', 'public/js')
.extract(['vue','jquery','lodash','bootstrap','axios',...])

...

// vendor libraries are extracted to 
//  public/js/vendor.js

// everything else will be in public/js/app.js 

Something like .extract($allVendorsCurrentAndFuture)?

Most helpful comment

Currently you can use empty extract() function to extract all dependencies:
mix.js('resources/js/app.js', 'public/js').sourceMaps().version().extract();

All 21 comments

Hmmm... When I manually type out my npm file devDependencies and dependencies vendor names in the .extract($allVendorsArray) I get many Warnings and Errors on build like these but many others of the same Module not found: Error: Can't resolve ****** variations:

````
WARNING in ./node_modules/execa/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'spawn-sync' in '/home/forge/xxx.com/node_modules/execa/node_modules/cross-spawn'
@ ./node_modules/execa/node_modules/cross-spawn/index.js 32:26-47
@ ./node_modules/execa/index.js
@ ./node_modules/laravel-mix/node_modules/os-locale/index.js
@ ./node_modules/laravel-mix/node_modules/yargs/yargs.js
@ ./node_modules/laravel-mix/node_modules/yargs/index.js
@ ./node_modules/laravel-mix/src/Verify.js
@ ./node_modules/laravel-mix/src/Api.js
@ ./node_modules/laravel-mix/src/index.js

// + more warnings of the same variation

ERROR in ./node_modules/babel-core/lib/api/node.js
Module not found: Error: Can't resolve '../../package' in '/home/forge/xxx.com/node_modules/babel-core/lib/api'
@ ./node_modules/babel-core/lib/api/node.js 60:15-39
@ ./node_modules/babel-core/index.js
@ ./node_modules/laravel-mix/src/FileCollection.js
@ ./node_modules/laravel-mix/src/tasks/CopyFilesTask.js
@ ./node_modules/laravel-mix/src/Api.js
@ ./node_modules/laravel-mix/src/index.js

ERROR in ./node_modules/concatenate/index.js
Module not found: Error: Can't resolve './lib-cov/concatenate' in '/home/forge/xxx.com/node_modules/concatenate'
@ ./node_modules/concatenate/index.js 2:4-36
@ ./node_modules/laravel-mix/src/FileCollection.js
@ ./node_modules/laravel-mix/src/tasks/CopyFilesTask.js
@ ./node_modules/laravel-mix/src/Api.js
@ ./node_modules/laravel-mix/src/index.js

ERROR in ./node_modules/url-loader/index.js
Module not found: Error: Can't resolve './options' in '/home/forge/xxx.com/node_modules/url-loader'
@ ./node_modules/url-loader/index.js 15:18-38

ERROR in ./node_modules/cross-env/node_modules/cross-spawn/index.js
Module not found: Error: Can't resolve 'child_process' in '/home/forge/xxx.com/node_modules/cross-env/node_modules/cross-spawn'

// + more errors of the same variation
````

Why does this happen? Shouldn't everything still build fine like before since we're just extracting the app.js vendors into vendors.js for caching purposes and to split up the big app size? How then to separate the vendors out so it to works correctly without the errors?

Ref https://github.com/JeffreyWay/laravel-mix/issues/1233

Webpack 4 syntax

 // https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      chunks: 'all',
    }
  },

@ankurk91 Sorry I am not following, so there is still no way to do it via the api, which I know is what you suggested in your linked thread. I also see the webpack 4 syntax but is there no way to do it with mix? I think almost all users would need something like this for production with frequent app.js updates...

Laravel mix still using webpack 3, so my code in that thread still working.
There is no official mix API to do so.

But soon Laravel mix will be updated to webpack 4.
Upcoming laravel mix version will be more flexible to extend.
Waiting to next release.

Got it, thanks for clarifying. Would be great if the next release comes with the mix.extractVendor() api baked in. Will try your other thread code for the current mix/webpack 3 version combo for now.
Is there an ETA for the next mix/webpack 4 release?

cc @JeffreyWay

If I followed Jeffrey on Twitter correctly a new version should land within 24 hours.

Oh nice, thanks for the update! Will wait for the upcoming release and hopefully it's been baked in. Will test the vendor.js splitting up then and reopen if there is issues :)

@MovingGifts
I have release this as a plugin, check

https://github.com/ankurk91/laravel-mix-auto-extract

@ankurk91 Thanks for that, I am currently using the same thing in the custom webpackConfig for the time being (same as your package). Only difference is the api method you abstracted for cleaner usage.

Thanks again for leading this thread in the right direction!

jknlk;

dfsdf

sdfsdf

sdfszdfdsf

sdfsdfs

sdfdsaf

sdfsafds

dfssdfdas

fdsasdfsadf

sfsdfsdf

I'm doing this at the end of my webpack.mix.js file.

// Loop through the package.json dependencies and extract them with mix.
const package = require('./package.json');
Object.keys(package.dependencies).forEach((key) => mix.extract([key]));

Currently you can use empty extract() function to extract all dependencies:
mix.js('resources/js/app.js', 'public/js').sourceMaps().version().extract();

Was this page helpful?
0 / 5 - 0 ratings

Related issues

RomainGoncalves picture RomainGoncalves  路  3Comments

pixieaka picture pixieaka  路  3Comments

Bomavi picture Bomavi  路  3Comments

kpilard picture kpilard  路  3Comments

nezaboravi picture nezaboravi  路  3Comments