webpack-hot-module-replacement.md

Webpack Hot Module Replacement

Design

yarn add --dev @pmmmwh/react-refresh-webpack-plugin react-refresh react-refresh-typescript

webpack/config/development.ts

import * as ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import reactRefreshTypeScript from "react-refresh-typescript";
import { type CustomTransformers } from "typescript";

export default {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/v,
        use: [
          {
            loader: "ts-loader",
            options: {
              getCustomTransformers: (): CustomTransformers => ({
                before: [reactRefreshTypeScript()],
              }),
            },
          },
        ],
      },
    ],
  },
  plugins: [new ReactRefreshWebpackPlugin()],
};

Rationale

Speeds by development by...

• Retaining application state which is lost during a full reload.
• Saving valuable development time by only updating what's changed.
• Instantly updating the browser when modifications are made to CSS/JS in the source code, which is almost comparable to changing styles directly in the browser's dev tools.

References

• Webpack Concept - Hot Module Replacement
• Webpack Guide - Hot Module Replacement
• React Refresh
• React Fast Refresh
• React Refresh TypeScript