I'm trying to build a web application made one main entry point (index.js) and a number of modules that I want to load dynamically.

Something like:

index.js

document.getElementById('button1').addEventListener('click', async function(){
  const mod = await import('module1.js');
  mod.run();
});

module1.js

export function run() {
  console.log("Hello from module1");
}

Is it possible to build a bundle for each of these files using Webpack 5?

What I tried

output.library (but it builds everything as libraries)

1. It seems that Webpack lets me set multiple entry points.

2. However to expose all of module1.js's exports I need to set output.library.

3. But if I do, then index.js is built as a library too, since there can be only one output field.

Multiple configurations (but it breaks the dev server)

I could configure Webpack to build both my main script and the modules using multiple configurations, but if I try this, then the webpack-dev-server tries to start two instances and fails.

It prints errors like:

<e> [webpack-dev-middleware] ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.

What else can I try?