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

Question

I'm using ASP.Net Core with Typescript/React/SpaServices/Webpack/HMR. When changing a tsx file HMR replaces the code in the browser.

My question in what function/program is watching the files for changes and then triggers the rebuild? Is webpack running in the background using node? If so, can I see that process running? Logs etc?

Answer 1

Is webpack running in the background using node?

Yes, absolutely. There's a lot going on here, but ultimately both webpack and the webpack-dev-middleware are handling this.

It starts with the call to UseWebpackDevMiddleware. e.g.:

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

As I've already said, there's a lot going on behind the scenes here, so I'll just give an overview of the main parts at play. Here's an important line of code from UseWebpackDevMiddleware (source):

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

The InvokeExortAsync function is where the communication between ASP.NET Core and NodeJs occurs. The nodeServices variable is an instance of HttpNodeInstance, which is a child of OutOfProcessNodeInstance. The OutOfProcessNodeInstance class spawns a NodeJs server when it's constructed, like so (source):

_nodeProcess = LaunchNodeProcess(startInfo);

This ends up running a NodeJs server using the entrypoint-http.js script file (source). This has a lot of code, but it ends up creating a HTTP server that listens for requests that come out of calls to InvokeExportAsync.

The JavaScript function that is being invoked here, createWebpackDevServer (source), looks like this, with exception-handling removed for brevity:

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

There's a lot of code for the createWebpackDevServer that is being invoked (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).

I hope that gives enough of an explanation and a starting point for your own exploration.