typescript - webpack 5 med HMR aktiverat - allt (även CSS-ändringar) orsakar en fullständig omladdning

Jag har ett litet Typescript/React-repo som använder webpack 5.72. Med Hot Module Replacement aktiverat skulle jag förvänta mig att kunna göra ändringar i komponenter eller CSS och att bara den ändrade komponenten eller stilen uppdateras. Istället orsakar varje ändring jag gör en fullständig uppdatering.

Varje ändring genererar rader som dessa i Chrome-konsolen:

[webpack-dev-server] "C:\path\to\ComponentName.tsx" from static directory was changed. Reloading...
index.js:551 [webpack-dev-server] App updated. Recompiling...
Navigated to http://localhost:8080/
bootstrap:24 [HMR] Waiting for update signal from WDS...

Det är det där "Navigated to localhost" som gör en fullständig uppdatering, men varför? Varför ser det mina filer som att de ligger i en statisk katalog istället för i moduler som kan bytas ut dynamiskt?

Repoet finns här, om någon vill kika på det och se koden/konfigurationen.

Jag har provat den här konfigurationen, auto-genererad för mig:

const path = require('path');

module.exports = {
  target: "web",
  mode: "development",
  entry: [
    './src/index.tsx',
    'react-hot-loader/patch',
  ],
  devtool: "inline-source-map",
  devServer: {
    static: {
      directory: path.resolve(__dirname, "src"),
    },
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules|(\.spec.ts)/,
      },
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/dist/",
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
      "app": path.resolve(__dirname, "src/"),
      "test": path.resolve(__dirname, "test/"),
    }
  },
};

Så som jag förstår det från webpack-dokumentationen, borde raden use: ["style-loader", "css-loader"] för CSS-filer åtminstone göra det möjligt för mig att ändra en CSS-fil utan att behöva ladda om allt, men det gör det inte. Och 'react-hot-loader/patch' borde göra samma sak för mina React-komponenter. Men återigen, det gör det inte.

Svar #1

Jag tror att problemet här är att din katalog för statiska filer inkluderar dina källfiler. Observera utdata "C:\path\to\ComponentName.tsx" från den statiska katalogen ändrades. Laddar om.... Att välja ett annat värde för devServer.static.directory kommer troligtvis att lösa det.