Webpack v5 で HMR を有効にする 2023
Next.js や create-react-app などがデフォルトで提供している設定を使っていたので、自分で HMR の設定をしたことがありませんでしたが、今更ながら社のプロジェクトを HMR 対応したので備忘録です。
調べると、 Webpack 4 の情報など比較的古い情報が多く見つかりますが、現在では react-refresh, @pmmmwh/react-refresh-webpack-plugin をインストールして README.md 通りに設定を追記するだけで有効化できます。
なお、このプラグインを使用している場合、下記は不要です。
エントリーファイルなどに module.hot.accept() を書く
new webpack.HotModuleReplacementPlugin() の追加
react-transform-hmr, webpack-hot-middleware, webpack-hot-loader などのプラグインの使用
module.hot.accept と devServer の hot を設定することでも HMR を使用できますが、 React のコンポーネントの状態が破棄されてしまうので先述の react-refresh を使用した設定をオススメします。