Switch ts-loader to babel and add hmr

webpack.config.js

@@ -1,5 +1,8 @@
+const webpack = require('webpack');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -8,15 +11,24 @@ module.exports = {
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
+  devServer: {
+    hot: true,
+  },
   resolve: {
     extensions: ['.js', '.ts', '.jsx', '.tsx'],
   },
   module: {
     rules: [
-      { test: /\.(ts|tsx)$/, loader: 'ts-loader' },
       {
-        test: /\.hbs|html$/,
-        loader: 'handlebars-loader'``,
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            plugins: [require.resolve('react-refresh/babel')],
+            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+          },
+        },
       },
       {
         test: /\.css$/i,
@@ -29,5 +41,7 @@ module.exports = {
       template: './src/index.html',
       filename: 'index.html',
     }),
+    new ReactRefreshWebpackPlugin(),
+    new ForkTsCheckerWebpackPlugin(),
   ],
 };