Basic Webpack Setup for TypeScript

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// npm install typescript webpack webpack-cli html-webpack-plugin clean-webpack-plugin copy-webpack-plugin ts-loader file-loader webpack-dev-server

module.exports = {
    mode: 'development',
    entry: {
        app: './src/main.ts',
    },
    output: {
        filename: '[name].[fullhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
        hot: true,
    },
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        // Uncomment if you have an assets folder.
        // new CopyPlugin({
        //  patterns: [
        //      { from: 'src/assets', to: 'assets' }
        //  ],
        // }),
        new HtmlWebpackPlugin({ template: './src/index.html' })
    ],
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    },
};