Webpack HMR не перезагружается при использовании реакции-горячей загрузки - PullRequest
Новая
       54

Webpack HMR не перезагружается при использовании реакции-горячей загрузки

0 голосов
/ 05 апреля 2020

Я безуспешно пытаюсь следовать некоторым учебникам по включению функции HMR веб-пакетов. Я нахожусь в состоянии, когда я могу получить проект для компиляции, но когда я делаю локальное изменение, в браузере отсутствует refre sh, и даже после ручного refre sh мои изменения не обновляются. Надеетесь, что кто-то может направить меня в правильном направлении?

Проект использует React / Typescript с веб-пакетом, babel и плагином реагировать на горячую загрузку.

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

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.

Но в браузере нет изменений.

...