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)?
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
// 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
@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();
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();