webpack 5 with HMR enabled - everything (even CSS changes) causes a full reload

28 views Asked by At

I've got a small Typescript/React repo using webpack 5.72. With Hot Module Replacement enabled, I'd expect to be able to make component or CSS changes and have only the changed component or style update. Instead, every change I make causes a full refresh.

Every change produces lines like this in the Chrome console:

[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...

It's that "Navigated to localhost" that's doing the full refresh, but why? Why is it seeing my files as being in a static directory instead of in modules that can be hot swapped?

The repo is here, if anyone wants to poke into it and see the code/configuration.

I've tried this configuration, auto-genned for me:

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/"),
    }
  },
};

As I understand it from the webpack docs, the use: ["style-loader", "css-loader"] line for the css files should at the very least enable me to change a CSS file without a full refresh, but it doesn't. And the 'react-hot-loader/patch', should do the same for my React components. But again, it doesn't.

0

There are 0 answers