I need some help with following scenario:
mix
.js('resources/assets/js/front/admin_app.js', 'public/js')
.js('resources/assets/js/front/user_app.js', 'public/js')
.extract(extractModulesAdmin, 'public/js/vendor_admin')
.extract(extractModulesCommon, 'public/js/vendor');
// extractModulesAdmin - admin specific libs
// extractModulesCommon- common libs
The vendor.js consists of libraries common for both admin and user and the admin specific libraries are included in vendor_admin.js.
This compiles ok, but when i try to run, it only works if :
vendor.js, vendor_admin.js, and admin_app.js
are present.
The other scenario when i load:
vendor.js, and user_app.js
does not run at all.
After some investigating i found that user_app.js has this line at end:
},[[1,"/js/manifest","/js/vendor_admin","/js/vendor"]]]);
When i remove '/js/vendor_admin' from the array it runs ok.
I think somehow webpack is making user_app depended on 'vendor_admin' which makes no sense since it has no libs that are used by user_app.
So any ideas ? Is this webpack configuration issue or is my assumtion that i can extract libs to separate vendors is wrong.
Follow up:
The answer is - this scenario is valid
The issue (hard to pinpoint) is that i've extracted for admin_vendor, some library which was actually used by both: admin and user entry points.
So webpack did the right thing forcing the import of admin_vendor. You need to be carefull with what you are extracting where.
Please or to participate in this conversation.