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

Question

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

我的问题是什么功能/程序正在观察文件的变化，然后触发重建？ webpack是在后台使用节点运行的吗？如果是这样，我能看到该进程正在运行吗？日志等？

Answer 1

webpack是在后台使用节点运行的吗？

是的，一点没错。这里有很多事情，但最终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和NodeJ之间进行通信的地方。 nodeServices变量是HttpNodeInstance的一个例子，它是OutOfProcessNodeInstance的孩子。 OutOfProcessNodeInstance类在构造时生成NodeJs服务器，如下所示（source）：

_nodeProcess = LaunchNodeProcess(startInfo);

这最终使用entrypoint-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），所以我不会在这里包含它，但足以说它最终运行使用webpack-dev-middleware（source）的连接服务器（source） 。

我希望能为你自己的探索提供足够的解释和起点。

Answer 2

• 组件的状态发生变化：只有在组件的状态发生变化时才能触发重新渲染。状态可以从道具更改或直接setState更改中更改。组件获取更新状态并决定是否应重新呈现组件。
• shouldComponentUpdate方法：默认情况下，shouldComponentUpdate返回true。这就是导致一直更新所有内容的原因。