webpack.config.js

const { resolve, join } = require('path');

module.exports = {
    //-------------------------------------------
    // webpack dev server needs mode set, to work
    //-------------------------------------------
    mode: 'development',
    //--------------------------------------------
    devtool: 'eval-source-map', // Note 2: eval-source map is for development mode debugging through browser
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [resolve(__dirname, 'src')],
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'], // Note 1: This helps typescript to resolve import statements/syntax at the top of a .ts file.
    },
    output: {
        // publicPath: 'dist', // commented out because using this didn't work for dev server. Fix(es) have been added towards the end of this file.
        filename: 'bundle.js',
        path: resolve(__dirname, 'dist'),
    },

    //--------------------------------------------
    // Tiny fix to solve "cannot get /" in browser
    //--------------------------------------------
    devServer: {
        static: {
            directory: join(__dirname, 'dist'),
        },
    },
};