How to have only one main chunk that can load other small chunks if required

[mukuljainx]

Context (you can skip this)

I am trying to create a plug and play kind of stuff for an app, where user can drop React Sandbox zip and fill in some basic things like app name and icon that app will be available as a mini-app in the main app. For this purpose, I have written my own webpack config as I want to React, ReactDOM (maybe more) as externals and different public path.

There will be no HTML generation as I will use the generated JS chunk to load on-demand in the main app, to handle the different id for mounting, I am replacing the default id (root) with a custom id for each app in JS (index.js file) ( better approach are welcomed).

Main Question

For this I need to figure out which JS I need to load initially to render the app, the easiest approach is to have one file, will work for small apps and POC but for bigger apps, I Was wonder if there is a way where I can only generate one file to get the app started then it can fetch other JS files if needed (route-based or component-based) if the dev has taken care of it.

If there is better approach that will be awesome, I was trying to figure out how html-webpack-plugin so can I get those initial JS files but as of now I am unable to understand it as more knowledge on loader and webpack is required.

current config is

optimization: {
    splitChunks: {
      // include all types of chunks
      chunks: "all",
      maxAsyncRequests: 1
    },
    runtimeChunk: "single"
  },