是什么触发了使用 SpaServices 在 HMR 中重建 webpack-bundle？

Question

我正在使用 ASP.Net Core 和 Typescript/React/SpaServices/Webpack/HMR。更改 tsx 文件时，HMR 会替换浏览器中的代码。

我的问题是什么 function/program 正在监视文件的更改然后触发重建？ webpack 运行在后台使用node吗？如果是这样，我可以看到那个过程运行吗？日志等？

Answer 1

组件状态改变：只有当组件状态改变时才会触发重新渲染。状态可以通过 props 更改或直接 setState 更改来更改。组件获取更新后的状态并决定是否应该重新渲染组件。
shouldComponentUpdate 方法： 默认情况下，shouldComponentUpdate returns 为真。这就是导致所有内容一直更新的原因。

Answer 2

Is webpack running in the background using node?

是的，绝对是。这里发生了很多事情，但最终 webpack 和 webpack-dev-middleware 都在处理这个问题。

它从调用 UseWebpackDevMiddleware 开始。例如：

app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
    HotModuleReplacement = true
});

正如我已经说过的，这里的幕后发生了很多事情，所以我将只概述其中的主要部分。这是来自 UseWebpackDevMiddleware (source) 的重要代码行：

nodeServices.InvokeExportAsync<WebpackDevServerInfo>(
    nodeScript.FileName,
    "createWebpackDevServer",
    JsonConvert.SerializeObject(devServerOptions)).Result;

InvokeExortAsync 函数是 ASP.NET Core 和 NodeJs 之间进行通信的地方。 nodeServices 变量是 HttpNodeInstance 的实例，它是 OutOfProcessNodeInstance 的子项。 OutOfProcessNodeInstance class 在构造时生成一个 NodeJs 服务器，像这样 (source):

_nodeProcess = LaunchNodeProcess(startInfo);

这最终运行使用入口点-http.js 脚本文件 (source) 的 NodeJs 服务器。这有很多代码，但它最终创建了一个 HTTP 服务器，用于侦听来自对 InvokeExportAsync.

的调用的请求。

此处调用的 JavaScript 函数 createWebpackDevServer (source) 看起来像这样，为简洁起见删除了异常处理：

export function createWebpackDevServer(callback) {
    let aspNetWebpack = require('aspnet-webpack');
    return aspNetWebpack.createWebpackDevServer.apply(this, arguments);
}

有很多 createWebpackDevServer 的代码被调用 (source), so I won't include it here, but suffice to say it ends up running a connect server (source) that uses the webpack-dev-middleware (source)。

我希望这能给出足够的解释，并为您自己的探索提供一个起点。

是什么触发了使用 SpaServices 在 HMR 中重建 webpack-bundle？

What triggers rebuild of webpack-bundle in HMR with SpaServices?

c#

webpack

asp.net-core

asp-net-core-spa-services