Webpack: enable hot module replacement (HMR)

webpack/development.ts

@@ -3,6 +3,7 @@ console.log('Running in development mode'); // eslint-disable-line no-console
 
 import { join } from 'path';
 
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import { merge } from 'webpack-merge';
 
 import sharedConfig from './shared';
@@ -78,7 +79,7 @@ const devServer: DevServerConfiguration = {
   host: devServerUrl.hostname,
   port: devServerUrl.port,
   https: devServerUrl.protocol === 'https:',
-  hot: false,
+  hot: true,
   allowedHosts: 'all',
   historyApiFallback: {
     disableDotRule: true,
@@ -116,6 +117,10 @@ const configuration: Configuration = {
     watchOptions,
   ),
 
+  plugins: [
+    new ReactRefreshWebpackPlugin(),
+  ],
+
   devServer,
 };
 

webpack/rules/babel.ts

@@ -25,6 +25,9 @@ const rule: RuleSetRule = {
         cacheDirectory: join(settings.cache_path, 'babel-loader'),
         cacheCompression: env.NODE_ENV === 'production',
         compact: env.NODE_ENV === 'production',
+        plugins: [
+          'react-refresh/babel',
+        ],
       },
     },
   ],