reactjs - 使用 react-hot-loader 时 Webpack HMR 不会重新加载

Question

我正在尝试按照一些教程来启用 webpacks HMR 功能，但没有任何运气。我现在可以编译项目，但是当我进行本地更改时，浏览器中没有刷新，即使在手动刷新之后，我的更改也没有更新。希望有人能指出我正确的方向吗？

项目使用带有 webpack、babel 和 react-hot-loader 插件的 React/Typescript。

包.json

    "dependencies": {
        "@types/react": "^16.8.3",
        "@types/react-dom": "^16.8.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-hot-loader": "^4.12.20",
        "ts-loader": "^5.3.3",
        "typescript": "^3.7.4"
    },
    "devDependencies": {
        "@babel/core": "^7.7.7",
        "@babel/preset-env": "^7.7.7",
        "@babel/preset-typescript": "^7.7.7",
        "@testing-library/react": "^9.4.0",
        "@types/jest": "^24.9.1",
        "@types/node": "^13.11.0",
        "@types/webpack-env": "^1.15.1",
        "babel-jest": "^24.9.0",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
        "css-loader": "^3.4.2",
        "jest": "^24.9.0",
        "jest-transform-css": "^2.0.0",
        "style-loader": "^1.1.3",
        "ts-jest": "^24.3.0",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.3"
    },
    "scripts": {
        "build": "webpack",
        "watch": "webpack -w",
        "start": "webpack-dev-server --open",
        "test": "jest"
    },

webpack.config.js

"use strict";

const { resolve } = require("path");
const webpack = require("webpack");

module.exports = {
    mode: "development",

    devtool: "inline-source-map",

    devServer: {
        hot: true,
        publicPath: "/"
    },

    entry: [
        "react-hot-loader/patch",

        "webpack-dev-server/client?http://localhost:8080",

        "webpack/hot/only-dev-server",

        "./src/index.tsx"
    ],

    output: {
        filename: "bundle.js"
    },

    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                loader: "ts-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },

    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    ]
};

babel.config.js

module.exports = {
    presets: [
        [
            "@babel/preset-env",
            {
                targets: {
                    node: "current"
                }
            }
        ],
        "@babel/preset-typescript"
    ],

    plugins: ["transform-es2015-modules-commonjs", "react-hot-loader/babel"]
};

index.tsx（条目）

///<reference types="webpack-env" />
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";
import { App } from "./App";

const render = () => {
    ReactDOM.render(
        <AppContainer>
            <App />
        </AppContainer>,
        document.getElementById("root")
    );
};

render();

if (module.hot) {
    module.hot.accept("./App", render);
}

如果我更改应用程序代码（在 App 的子组件中），我会在控制台中看到：

ℹ ｢wdm｣: Compiling...
ℹ ｢wdm｣: Hash: 079743fd955ae78fb63f
Version: webpack 4.41.5
Time: 1697ms
Built at: 04/04/2020 6:05:50 PM
                                  Asset      Size  Chunks                               Chunk Names
   a35ade149aaa2b45267d.hot-update.json  46 bytes          [emitted] [immutable] [hmr]  
                              bundle.js  6.82 MiB    main  [emitted]                    main
main.a35ade149aaa2b45267d.hot-update.js   3.5 KiB    main  [emitted] [immutable] [hmr]  main
Entrypoint main = bundle.js main.a35ade149aaa2b45267d.hot-update.js
[./src/containers/header/Header.tsx] 187 bytes {main} [built]
[./src/containers/index.ts] 97 bytes {main} [built]
    + 97 hidden modules
ℹ ｢wdm｣: Compiled successfully.

但是浏览器没有变化。

标签： reactjstypescriptwebpack-dev-serverwebpack-hmrreact-hot-loader