Webpack - How to reuse global library name when it already exists?

Question

Good evening!

I have this monorepo with multiple packages, where each of them is bundled independently using Webpack.

Before it was a monorepo, I would have a single bundle file, and it would be possible to have it available through a global variable within the browser through output.library property. Now I have the following since I have multiple entries:

output: {
    library: "SC",
    // export itself to UMD format
    libraryTarget: "umd",
    umdNamedDefine: true,
    filename: "[name]/dist/organization-[name].js",
    // fix for https://github.com/webpack/webpack/issues/6525
    globalObject: `(typeof self !== 'undefined' ? self : this)`
  }

The problem is that if I use this same config for every package, and I import more than one to the browser using script tags, only the latest script will actually be available because it's essentially recreating the global variable each time.

Is there a way to reuse it? Or maybe a better convention I could use here. In node, for instance, I import each of them using the bundle name, but in the browser, I feel like it should all be under the same global variable.

Thank you for any suggestions!

Answer 1

As mentioned in the issue I created over webpack's repository , the solution is to use the following: library: ["MyLibrary", "[name]"]

That will make all packages available under the same global variable MyLibrary but separated by their respective entry (ie, MyLibrary.entryOne and MyLibrary.entryTwo ).