Webpackdevmiddleware of ASP. NET Core MVC Middleware

Source: Internet
Author: User

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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.