Webpackdevmiddleware of ASP. NET Core MVC Middleware

Webpackdevmiddleware of ASP. NET Core MVC Middleware

• WebpackDevMiddlewareMiddleware 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

• Create a Node instance

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

• Pending update ...

Webpackdevmiddleware of ASP. NET Core MVC Middleware