how can I bundle multiple libraries with webpack and use them in a browser

Webpack describes a multi-main entry feature that seems to do exactly this, it bundles several libs into one file. The problem is that when I load that file only the last library on the list is available.

I’ve created a small demo on github.

There are 2 libraries each exporting a single symbol, only lib2.d2 is accessible from the test.html that loads the bundled JS. If you look in the bundle file you can see the code from lib1 but it’s not exported in any way that I can find.

The webpack config is below. I suspect the problem is that there’s no way to supply 2 library names when there’s out only output and so the last one over-writes the earlier ones.

const path = require('path');

module.exports = {
  entry: ['./js/lib1.js', './js/lib2.js'],
  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    library: {
      name: 'MyLibrary',
      type: 'umd',
    },
    filename: 'lib.js',
    path: path.resolve(__dirname, 'dist'),
  },
  "optimization": {
    "minimize": false,
    usedExports: true,
  },
  mode: "development",
};

If you’re curious why I would want to do this, I’m doing some development on wix.com. The only way to push JS files up to their server is copy/paste one at a time. Bundling a bunch of stuff into one file will save me some pain. My current work-around is to output to multiple files and then cat them all together with something export const exportLib1 = lib1 for each one. That gives me a JS file that I can import and access each one but there must be an easier way.