这可能一直被问到，但我在阳光下尝试了所有方法，但找不到解决方案。
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）时，应用程序会重新加载。但是，我只想重新加载组件，而不是整个页面。我不确定我做错了什么。任何帮助将不胜感激！
【问题讨论】：
标签： reactjs webpack webpack-hmr react-hot-loader
对于使用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 进行小幅编辑，而不会丢失浏览器中的状态。
【讨论】：
要调试此类问题，请在 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）。
【讨论】：