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:

The issue I'm trying to fix is that the app.vendor.js is identical for all of my SPAs. It includes:

vendor: [

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:

Workbench App:

User Management App:

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: