Reactjs 使用react热加载程序时不重新加载网页包HMR

我正试图遵循一些教程，在没有任何运气的情况下启用webpacks HMR功能。我已经到了可以编译项目的地步，但是当我进行本地更改时，浏览器中没有刷新，即使在手动刷新之后，我的更改也不会更新。希望有人能给我指出正确的方向

项目使用React/Typescript和webpack、babel以及React热加载插件

package.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()
    ]
};

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

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

babel.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()
    ]
};

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

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

index.tsx（条目）

但浏览器中没有任何更改