webpack.config.js

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

module.exports =
{
    entry:
    {
        app: `${path.join(__dirname, 'src')}/main.ts`
    },
    output:
    {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module:
    {
        rules:
        [
            {
                test: /\.ts/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use:
                {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    mode: 'development',
    devtool: 'source-map',
    devServer:
    {
        hot: true,
        historyApiFallback: true
    },
    resolve:
    {
        extensions: ['.ts', '.js'],
        alias:
        {
            '@': path.join(__dirname, 'src')
        }
    },
    plugins:
    [
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: `${path.join(__dirname, 'public')}/index.html`
        }),
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer'
        })
    ]
};