Add react HMR

frontend/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -12,18 +13,28 @@ module.exports = (env, argv) => {
       filename: 'bundle.js',
       clean: true,
 
-      // Empty string generates relative paths that work through proxies
-      publicPath: '',
+      // Dev needs '/' for HMR WebSocket; prod uses '' for relative paths through proxies
+      publicPath: isProduction ? '' : '/',
     },
     resolve: {
-      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+      extensions: ['.ts', '.tsx', '.js'],
     },
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
-          use: 'ts-loader',
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: [
+                '@babel/preset-env',
+                ['@babel/preset-react', { runtime: 'automatic' }],
+                '@babel/preset-typescript',
+              ],
+              plugins: isProduction ? [] : ['react-refresh/babel'],
+            },
+          },
         },
         {
           test: /\.css$/,
@@ -39,7 +50,9 @@ module.exports = (env, argv) => {
       new HtmlWebpackPlugin({
         template: './src/index.html',
       }),
-      ...(isProduction ? [new MiniCssExtractPlugin()] : []),
+      ...(isProduction
+        ? [new MiniCssExtractPlugin()]
+        : [new ReactRefreshWebpackPlugin()]),
     ],
     devServer: {
       port: 3000,
@@ -47,11 +60,8 @@ module.exports = (env, argv) => {
       historyApiFallback: {
         index: 'index.html',
       },
-      // Disable WebSocket-based HMR for proxy compatibility
-      // VS Code web proxy sends WebSocket messages as Blobs which breaks HMR
-      webSocketServer: false,
-      hot: false,
-      liveReload: false,
+      hot: true,
+      liveReload: true,
       proxy: [
         {
           context: ['/api'],