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

Posted 2023-02-21

【中文标题】Webpack / react hot reload重新加载整个页面？

【英文标题】：Webpack/react hot reload reloading whole page?

【发布时间】：2018-05-27 22:02:30

【问题描述】：

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

I've created a repo to make it easier to get help。您可以克隆它，运行npm install，然后运行npm start:dev 以在http://localhost:8080 上查看快速本地服务器。

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

【参考方案1】：

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

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

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

我的建议：保持pages/ 文件夹中的文件简单。 在 components/ 文件夹中的组件文件中迭代您的设计/细节。

例如：

// 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 进行小幅编辑，而不会丢失浏览器中的状态。

【参考方案2】：

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

错误是：

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 和 here 的描述处理它（检查步骤 3.3.c）。

【讨论】：

啊啊啊啊啊啊谢谢！！

快速提问：为什么我需要退出 babel 转译 ES6 模块？

感谢您的提问。我已经更新了答案。希望对您有所帮助。

2020年如何解决这个问题？我在 create-react-app 项目中找不到这些选项。