Currently our web application is 18+ AngularJS SPAs. Each of them operates in it's own docker container and each has it's own webpack configuration, though they're all derived from the same base config in a shared library.
As part of that configuration each of them generates their own:
app.bundle.js
app.vender.js
The issue I'm trying to fix is that the app.vendor.js is identical for all of my SPAs. It includes:
vendor: [
'angular',
'angular-ui-bootstrap',
'underscore'
]
We don't include different versions of angular, angular-ui-bootstrap, underscore across our apps, so it's wasteful that the user would download a different vendor file for each SPA as they navigate between them.
As I navigate around my deployed app I can see each one downloads the 2 bundled JS files but at different URLs. Both the hashes as well as the paths are different. So even if I got the hashes to all be identical, I think the browser would still treat all of these as unique files.
Home App:
https://my-domain.io/vendor.bundle.js?9a6814b4e4dbb0feaa27
https://my-domain.io/app.bundle.js?9a6814b4e4dbb0feaa27
Workbench App:
https://my-domain.io/episode-workbench/vendor.bundle.js?db6fb9736eaae45f9272
https://my-domain.io/episode-workbench/app.bundle.js?db6fb9736eaae45f9272
User Management App:
https://my-domain.io/user_management/vendor.bundle.js?1762ff3f728bb14fc632
https://my-domain.io/user_management/app.bundle.js?1762ff3f728bb14fc632
So how would I get all 3 of these applications to use the same vendor.bundle.js file? I'm not exactly sure how to pull this off.
Look into using Externals to solve this problem:
https://webpack.js.org/configuration/externals/
