Question

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

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

Answer 1

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

是的，绝对的。这里有很多内容，但最终webpack和webpack-dev-middleware都在处理此问题。

首先是对UseWebpackDevMiddleware的调用。 e.g：

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。这就是导致一直在更新所有内容的原因。

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

2 个答案: