Webpack, learning to share

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/


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More