Webpack/React 热重载会重新加载整个页面吗？

Question

这可能是老生常谈，但我已经尝试了各种方法，却找不到解决方案。

我创建了一个仓库，以便更轻松地获取帮助。您可以克隆它，运行npm install，然后npm start:dev，在http://localhost:8080上查看快速的本地服务器。

它能工作，当我更改一个文件（比如，src/components/Note/Note.css）时，应用程序会重新加载。然而，我想只重新加载组件，而不是整个页面。我不确定我做错了什么。非常感谢您的帮助！

- enrique-ramirez

Answer 1

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

错误信息是：

Uncaught RangeError: Maximum call stack size exceeded

进行以下更改后问题得以解决：

1. 从插件中删除new webpack.HotModuleReplacementPlugin()（因为webpack-dev-server已经使用--hot启动）

2. 还可以通过更新.babelrc中的presets为["react", ["env", { "modules": false }]] 来退出将ES6模块转译为Babel。

"modules": false是告诉Babel不要编译导入/导出，而让Webpack按照这里和这里所述处理它们（请查看第3.3.c步骤）。

- Bless

---

哦哦哦哦哦哦哦哦哦哦谢谢！ - enrique-ramirez

一个快速的问题：为什么我需要选择退出Babel对ES6模块的转译？ - enrique-ramirez

谢谢您的询问。我已经更新了答案。希望能对您有所帮助。 - Bless

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

Answer 2

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

- Mark