Webpackdevmiddleware of ASP. NET Core MVC Middleware
WebpackDevMiddleware
Middleware is used primarily for the development of SPA applications, enabling Webpack
and enhancing the web development experience. Well, what do you want to do with it? This is mainly done by learning the middleware and learning how to enable support in the core Webpack
- Through the middleware of the ASP. NET core MVC pipeline, we can understand what the middleware is, and now it is a middleware unit, a point to learn all kinds of middleware, understand and master, and finally learn to write middleware.
- The middleware source code
Description Webpackdevmiddleware
-
Enables Webpack Dev middleware support. This hosts a instance of the Webpack compiler in memory
In your application so, can always serve up-to-date webpack-built resources without have
To run the compiler manually. Since The Webpack compiler instance is retained in memory, incremental
Compilation is vastly faster this re-running the compiler from scratch.
Incoming requests that match webpack-built files would be a handled by returning the Webpack compiler
Output directly, regardless of files on disk. If compilation is in progress when the request arrives,
The response would pause until updated compiler output is ready.
- It probably means that the
Webpack
compiler instance exists in memory and always provides the most recently compiled resources, and incremental compilation is much faster than recompiling. Any request for Webpack
a compiled file is returned as is, and if the compilation is not completed when the request arrives, the response is paused until the compilation is complete and the output is ready
Nodeservices
-
Unlike other consumers of Nodeservices, Webpackdevmiddleware Dosen ' t share Node instances, nor does it
Use your DI configuration. It's important for Webpackdevmiddleware to has its own private Node instance
Because it must not restart when files change (if it does, you ' d lose all the benefits of Webpack
Middleware). And since this is a dev-time-only feature, it doesn ' t matter if the default transport isn ' t
As fast as some theoretical future alternative.
- Webpackdevmiddleware does not share node instances, nor does it share the DI configuration used. The node service cannot be restarted because the file changed. This is a development-time feature, so the transfer speed may not be fast
Analysis
var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices);var nodeServices = NodeServicesFactory.CreateNodeServices(nodeServicesOptions);
- Create
devServerOptions
, including the settings webpack.config.js
of the path and the integration Stratup.cs
of the settings, module hot load breakpoints and so on. These settings need to be uploaded to Node
the aspnet-webpack
module, if it is a custom module, then the parameters are defined by themselves
var devServerOptions = new{ webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile), suppliedOptions = options, understandsMultiplePublicPaths = true, hotModuleReplacementEndpointUrl = hmrEndpoint};
- The following is done by
nodeServices
executing the aspnet-webpack
method in the specified module and getting the result. The parameters are the module file path, the method to invoke, the parameters passed. The parameters passed to the JS module are first serialized into a JSON string, and the module receives the parameters and then deserializes them into objects.
var devServerInfo = nodeServices.InvokeExportAsync<WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer", JsonConvert.SerializeObject(devServerOptions, jsonSerializerSettings)).Result;
The
- returns the output directory after the
Webpack
compilation, looping through the output directory, adding the request agent, and proxying to all output directories. Timeout 100s, /__webpack_hmr
infinite timeout
- proxy source code
foreach (Var publicpath in devserverinfo.publicpaths) {Appbuilder.useproxytolocalwebpackdevmiddleware (PublicPath + Hmrendpoint, Devserverinfo.port, Timeout.infinitetimespan); Appbuilder.useproxytolocalwebpackdevmiddleware (Publicpath, Devserverinfo.port, Timespan.fromseconds (100));} Note that this was hardcoded to make requests to "localhost" regardless of the hostname of the//server as far as the CL Ient is concerned. This is because Conditionalproxymiddlewareoptions is//the one making the internal HTTP requests, and it's going to being to Some port on this machine//because Aspnet-webpack hosts the dev server there. We can ' t use the hostname-the client//sees, because that could be anything (e.g., some upstream load balancer) and W E might not be//able-make outbound requests-it from here.//Also Note that the Webpack HMR service always uses HTTP , even if your app server uses https,//because the HMR service have no need for HTTPS (the client doesn ' t see it directly -ALL traffic//to it are proxied), and the HMR service couldn ' t use HTTPS anyway (in general it wouldn ' t have//the necessary Certificate). var proxyoptions = new Conditionalproxymiddlewareoptions ("http", "localhost", proxytoport.tostring (), RE Questtimeout);appbuilder.usemiddleware<conditionalproxymiddleware> (Publicpath, proxyOptions);
Results
- Create your own middleware, customize the configuration, run the
Webpack
service, just create Node
an instance and invoke the module you wrote. The module runs the service according to the configuration transmitted.
- Key methods
var nodeservicesoptions = new Nodeservicesoptions (appbuilder.applicationservices); Node configuration var nodeservices = nodeservicesfactory.createnodeservices (nodeservicesoptions); Create a Node instance//dev service configuration var devserveroptions = new{Webpackconfigpath = Path.Combine (Nodeservicesoptions.projectpath, opt Ions. ConfigFile?? Defaultconfigfile), suppliedoptions = options, Understandsmultiplepublicpaths = True, Hotmodulereplacementendpoin Turl = hmrendpoint};//Call js module, run dev service, return output directory var devserverinfo = nodeservices.invokeexportasync< Webpackdevserverinfo> (Nodescript.filename, "Createwebpackdevserver", Jsonconvert.serializeobject ( Devserveroptions, Jsonserializersettings)). result;//Add output directory to Agent foreach (Var publicpath in devserverinfo.publicpaths) { Appbuilder.useproxytolocalwebpackdevmiddleware (Publicpath + hmrendpoint, Devserverinfo.port, Timeout.infinitetimespan); Appbuilder.useproxytolocalwebpackdevmiddleware (Publicpath, Devserverinfo.port, Timespan.fromseconds (100));} Private static void Useproxytolocalwebpackdevmiddleware (This iapplicationbuilder appBuilder, string publicpath, int Proxytoport, TimeSpan requesttimeout) {var proxyoptions = new Conditionalproxymiddlewareoptions ("http", "Localh Ost ", Proxytoport.tostring (), requesttimeout); Appbuilder.usemiddleware<conditionalproxymiddleware> (Publicpath, proxyoptions);}
Example
Webpackdevmiddleware of ASP. NET Core MVC Middleware