Converting legacy namespace code to modules from the top down

I'm trying to convert out codebase which is comprised of multiple repositories to use modules instead of namespaces.

Sorry ahead of time if my understanding is fundamentally wrong, my main expirience in javascript is in this company so this is all I've ever known.

The codebase has heiharchies where certain repositories inherit from the base one so for instance if we have A,B,C,D,E then B,C,D,E all know A. C might know B, but D only knows A, while E knows D and C. (Attached image to be clear)

Right now we have every repository compile into 1 js file using tsconfig outFile, and we load all of it in our html file one by one in order in script tags.

I've started converting the "upper" repos as modules can use namespaces, (so in my example E and D). I changed all of the code inside the repositories themselves to be modular and not use namespaces. It now compiles properly and works (individually - the issue I'm having is with making them import from one another).

Since I'm trying to preserve the behavior it seems like I need to use a bundler. I'm trying to use webpack but I'm having some problems with it.

I created a package.json (we didn't have one because we just directly made one js file and put it in the html until now yes that means we couldn't import things properly it's a nightmare it's why I'm trying to change it). Installed webpack ts-loader and yarg.

I've then made the webpack.config.js I linked below and tried compiling. Some of my repos don't have good entry files because they are initialized by other repos so I have to make a massive list and check that all files are at least written in the JS (there has to be a solution for this i'm missing right?)

The other issue is I don't understand how to make the other repos import from the repo I just bundled.

I put the bundled.js in the node_modules but when I attempt to import a class from it I get the following error: "TS2305: Module '"../../node_modules/@types/hybridPanel.js"' has no exported member 'test'. (I am trying to load D in E in this instance both have been converted to modules and are not using namespaces so this should work).

Do I need to publish the repo somewhere and npm install it in repo2 (I thought that's the same thing as moving the js over).

So the questions I have are:

1. How do I make this work?
2. What do I do about the entry files issue?
3. Am I even going about this the right way (will I even get types if I just import the js)?
4. Will we need to change our tags in the html to be type=module instead of javascript?
5. If I were to add a module (using npm or similar) will I then need to add it to the externals tag in the webpack? I'm not confident in my understanding just yet.
6. Is this the correct way of converting to modules from namespaces? Our plan is if I can get this to work to convert the rest of the higher ones next and then do the lower ones all at once (the base ones multiple people use) and fix the imports in the higher ones once we get there.

webpack config link : https://pastebin.com/iNqV1dEV

const webpack = require("webpack");
const path = require("path");
const yargs = require("yargs");
const env = yargs.argv.env; // use --env with webpack 2
const pkg = require("./package.json");
const shouldExportToAMD = yargs.argv.amd;

let libraryName = pkg.name;

let outputFile, mode;

if (shouldExportToAMD) {
  libraryName += ".amd";
}

if (env === "build") {
  mode = "production";
  outputFile = libraryName + ".min.js";
} else {
  mode = "development";
  outputFile = libraryName + ".js";
}

const config = {
  mode: mode,
  entry: [__dirname + "/src/panel/MoPanelManager.ts", __dirname + "/src/panel/chat/MoSingleChat.ts", __dirname + "/src/panel/booth/MoBoothDisplays.ts", __dirname + "/src/panel/chat/MoGifs.ts", __dirname + "/src/settings/MoSettings.ts"],
  devtool: "source-map",
  output: {
    path: __dirname + "/www/module",
    filename: outputFile,
    library: libraryName,
    libraryTarget: "umd",
    libraryExport: "default",
    umdNamedDefine: true,
    globalObject: "typeof self !== 'undefined' ? self : this",
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: {
          loader: 'ts-loader',
        },
        exclude: /(node_modules|bower_components)/,
      },
    ],
  },
  resolve: {
    modules: [path.resolve("./node_modules"), path.resolve("./src")],
    extensions: [".ts", ".js"]
  },
};

module.exports = config;

Image of the repo example