Webpack/react 热重载重新加载整个页面？

Question

这可能一直被问到，但我已经尝试了所有方法，但找不到解决方案。

I've created a repo to make it easier to get help. You can clone it, run npm install and then npm start:dev to see a quick local server on http://localhost:8080.

它有效，当我更改文件（例如，src/components/Note/Note.css）时，应用程序会重新加载。但是，我只想重新加载组件，而不是整个页面。我不确定我做错了什么。任何帮助将不胜感激！

Answer 1

要调试此类问题，请在 Chrome DevTools 控制台设置中启用 "Preserve log" 以在页面刷新时保留控制台日志。

错误是：

Uncaught RangeError: Maximum call stack size exceeded

进行以下更改后，此问题已得到修复：

从插件中删除 new webpack.HotModuleReplacementPlugin()（因为 webpack-dev-server 以 --hot 启动）
还通过将 .babelrc 中的 presets 更新为 ["react", ["env", { "modules": false }]]，选择退出 babel 转译 ES6 模块。

"modules": false是告诉babel不要编译import/exports，让webpack按照here and here的描述处理（检查步骤3.3.c）。

Answer 2

对于使用 Next.js 的任何人：

如果您在 pages/ 中编辑文件，整个页面将重新加载。糟糕，状态丢失了。

如果您在 components/ 中编辑文件，则只会重新加载相关模块（即如您所愿的热重新加载）。

我的建议：使 pages/ 文件夹中的文件保持简单。在 components/ 文件夹中的组件文件中迭代 design/details。

例如：

// pages/welcome.jsx
import WelcomePage from "../components/welcomePage";

export default function Welcome() {
  return <WelcomePage />;
}

// components/welcomePage.jsx
import React from "react";
import Layout from "./layout";
import { useContext, useEffect, useState } from "react";
import PlayerContext from "../../context/playerContext";

export default function WelcomePage() {
  const { songTitle } = useContext(PlayerContext);
  return (
    <Layout>
      <div className="...">
        <div className="...">
          Welcome! Let's play {songTitle}.
        </div>
      </div>
    </Layout>
  );
}

然后您可以继续对 components/welcomePage.jsx 进行小的编辑，而不会丢失浏览器中的状态。

Webpack/react 热重载重新加载整个页面？

Webpack/react hot reload reloading whole page?

reactjs

webpack

react-hot-loader

webpack-hmr