webpack-dev-serverでホットリロードされない

状況

npm run buildをし直すと変更が反映される。しないと変更が反映されない。

解決差分

 const path = require("path");

 module.exports = {
     entry: "./src/index.tsx",
+    devServer: {
+        contentBase: "./",
+        port: 8080,
+        publicPath: "/dist/",
+    },
     module: {
         rules: [
             {
                 test: /\.tsx$/,
                 use: "ts-loader",
                 exclude: /node_modules/,
             },
         ],
     },
     resolve: {
         extensions: [".js", ".ts", ".tsx"],
     },
     output: {
         path: path.resolve(__dirname, "dist"),
         filename: "index.js",
         publicPath: "/",
     },
 };

解決内容コピー用

webpack.config.jsに以下のdevServer設定を追加します。

devServer: {
    contentBase: "./",
    port: 8080,
    publicPath: "/dist/",
},

この設定により、ホットリロードが正常に機能するようになりました。特にcontentBaseとpublicPathの設定が重要です。