Html-loader not resolving javascript entry file

I'm trying to run a multiple entry web app with webpack 5. Basically I have multiple entry points with their own HTML/JS/Images et cetera. The images are used in tags within the HTML files. Without HTML-loader I was unable to show the images.

Example entry folder:

However, when using HTML-loader I had to include the JS script like this:

<script src="./index.ts"></script>

This is because there is basically no 'index.js' file before building. However, this gives me a runtime error saying I cannot load .ts files and it is being loaded as a video MIME file (I understand a browser cannot load a .ts file).

My question is basically: how can I either load the typescript file when using html-loader, or how can I load 's without html-loader.

Webpack config:

/* eslint-disable no-unused-vars */
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: {
        vehicle: './src/cef/vehicle/index.ts',
        progressbar: './src/cef/progressbar/index.ts',
        vehiclemods: './src/cef/vehiclemods/index.ts',
        login: './src/cef/login/index.ts',
    },
    output: {
        path: path.resolve(__dirname, '../client_packages/TYPESCRIPT/cef/'),
        filename: '[name]/index.js',
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'resolve-url-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.html$/i,
                use: [
                    'html-loader',
                ],
            },
            {
                test: /\.png$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                    },
                }],
            },
        ],
    },
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.js',
            '.scss',
            '.css',
        ],
        alias: {
            '~assets': path.resolve(__dirname, 'src/cef/assets'),
        },
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'vehicle/vehicle.html',
            template: './src/cef/vehicle/vehicle.html',
            chunks: ['vehicle'],
            inject: false,
        }),
        new HtmlWebpackPlugin({
            filename: 'progressbar/progressbar.html',
            template: './src/cef/progressbar/progressbar.html',
            chunks: ['progressbar'],
            inject: false,
        }),
        new HtmlWebpackPlugin({
            filename: 'vehiclemods/vehiclemods.html',
            template: './src/cef/vehiclemods/vehiclemods.html',
            chunks: ['vehiclemods'],
            inject: false,
        }),
        new HtmlWebpackPlugin({
            filename: 'login/login.html',
            template: './src/cef/login/login.html',
            chunks: ['login'],
            inject: false,
        }),
        new CopyWebpackPlugin({
            patterns: [
                {from: './src/cef/login/images', to: 'images/'},
            ],
        }),
    ],
    devServer: {
        contentBase: './',
        port: 9000,
        historyApiFallback: true,
    },
};

module.exports = config

;