asp.net core mvc 中间件之WebpackDevMiddleware
asp.net core mvc 中间件之WebpackDevMiddleware
WebpackDevMiddleware
中间件主要用于开发SPA应用,启用Webpack
,增强网页开发体验。好吧,你想用来干嘛就干嘛,这次主要是通过学习该中间件,学习如何在core中启用Webpack
支持- 通过上上篇asp.net core mvc 管道之中间件,大致可以了解中间件是什么东西,现在就以中间件为单位,一个一个点学习各种中间件,了解并掌握,最后学会自己写中间件
- 该中间件源码
说明
WebpackDevMiddleware
Enables Webpack dev middleware support. This hosts an instance of the Webpack compiler in memory
in your application so that you can always serve up-to-date Webpack-built resources without having
to run the compiler manually. Since the Webpack compiler instance is retained in memory, incremental
compilation is vastly faster that re-running the compiler from scratch.
Incoming requests that match Webpack-built files will be handled by returning the Webpack compiler
output directly, regardless of files on disk. If compilation is in progress when the request arrives,
the response will pause until updated compiler output is ready.
- 大概意思是
Webpack
编译器实例存在于内存,始终提供最新编译的资源,增量编译比重新编译速度要快得多。任何请求Webpack
编译后的文件,都原样返回,如果请求到达时编译没完成,响应将暂停,直到编译完成,输出准备就绪
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 have its own private Node instance
because it must not restart when files change (if it did, 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不共享Node实例,也不共享使用的DI配置。因为文件改变时Node服务不能重启。这是个开发时使用的功能,所以传输速度可能不会很快
分析
- 创建Node实例
var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices);
var nodeServices = NodeServicesFactory.CreateNodeServices(nodeServicesOptions);
- 创建
devServerOptions
,包含设置webpack.config.js
的路径以及整合在Stratup.cs
的设置、模块热加载断点等。这些设置需要传到Node
的aspnet-webpack
模块,如果是自定义的模块,那么参数也是自己定义啦
var devServerOptions = new
{
webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile),
suppliedOptions = options,
understandsMultiplePublicPaths = true,
hotModuleReplacementEndpointUrl = hmrEndpoint
};
- 下面是通过
nodeServices
,执行指定aspnet-webpack
模块里面的方法并得到结果。参数分别是模块文件路径、要调用的方法、传递的参数。传递给js模块的参数先序列成json字符串,模块接收参数后再反序列化成对象
var devServerInfo =
nodeServices.InvokeExportAsync<WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer",
JsonConvert.SerializeObject(devServerOptions, jsonSerializerSettings)).Result;
- 返回结果是
Webpack
编译之后的输出目录,循环输出目录,添加请求代理,代理到所有输出目录。超时时间100s,/__webpack_hmr
无限超时 - 代理源码
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 is hardcoded to make requests to "localhost" regardless of the hostname of the
// server as far as the client is concerned. This is because ConditionalProxyMiddlewareOptions is
// the one making the internal HTTP requests, and it's going to be to some port on this machine
// because aspnet-webpack hosts the dev server there. We can't use the hostname that the client
// sees, because that could be anything (e.g., some upstream load balancer) and we might not be
// able to make outbound requests to it from here.
// Also note that the webpack HMR service always uses HTTP, even if your app server uses HTTPS,
// because the HMR service has no need for HTTPS (the client doesn't see it directly - all traffic
// to it is 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(), requestTimeout);
appBuilder.UseMiddleware<ConditionalProxyMiddleware>(publicPath, proxyOptions);
结果
- 创建自己的中间件,自定义配置,运行
Webpack
服务,只需要创建Node
实例,调用自己写的模块即可。模块根据传过来的配置运行服务即可 - 关键方法
var nodeServicesOptions = new NodeServicesOptions(appBuilder.ApplicationServices); // node配置
var nodeServices = NodeServicesFactory.CreateNodeServices(nodeServicesOptions); // 创建node实例
// dev服务配置
var devServerOptions = new
{
webpackConfigPath = Path.Combine(nodeServicesOptions.ProjectPath, options.ConfigFile ?? DefaultConfigFile),
suppliedOptions = options,
understandsMultiplePublicPaths = true,
hotModuleReplacementEndpointUrl = hmrEndpoint
};
// 调用js模块,运行dev服务,返回输出目录
var devServerInfo =
nodeServices.InvokeExportAsync<WebpackDevServerInfo>(nodeScript.FileName, "createWebpackDevServer",
JsonConvert.SerializeObject(devServerOptions, jsonSerializerSettings)).Result;
// 添加输出目录到代理
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", "localhost", proxyToPort.ToString(), requestTimeout);
appBuilder.UseMiddleware<ConditionalProxyMiddleware>(publicPath, proxyOptions);
}
示例
- 待更新...
asp.net core mvc 中间件之WebpackDevMiddleware的更多相关文章
- asp.net core mvc 中间件之路由
asp.net core mvc 中间件之路由 路由中间件 首先看路由中间件的源码 先用httpContext实例化一个路由上下文,然后把中间件接收到的路由添加到路由上下文的路由集合 然后把路由上下文 ...
- asp.net core mvc 管道之中间件
asp.net core mvc 管道之中间件 http请求处理管道通过注册中间件来实现各种功能,松耦合并且很灵活 此文简单介绍asp.net core mvc中间件的注册以及运行过程 通过理解中间件 ...
- ASP.NET Core MVC/WebAPi如何构建路由?
前言 本节我们来讲讲ASP.NET Core中的路由,在讲路由之前我们首先回顾下之前所讲在ASP.NET Core中的模型绑定这其中有一个问题是我在项目当中遇见的,我们下面首先来看看这个问题. 回顾A ...
- asp.net core mvc权限控制:权限控制介绍
在进行业务软件开发的时候,都会涉及到权限控制的问题,asp.net core mvc提供了相关特性. 在具体介绍使用方法前,我们需要先了解几个概念: 1,claim:英文翻译过来是声明的意思,一个cl ...
- ASP.NET Core MVC 中设置全局异常处理方式
在asp.net core mvc中,如果有未处理的异常发生后,会返回http500错误,对于最终用户来说,显然不是特别友好.那如何对于这些未处理的异常显示统一的错误提示页面呢? 在asp.net c ...
- asp.net core mvc剖析:启动流程
asp.net core mvc是微软开源的跨平台的mvc框架,首先它跟原有的MVC相比,最大的不同就是跨平台,然后又增加了一些非常实用的新功能,比如taghelper,viewcomponent,D ...
- ASP.NET Core MVC 源码学习:Routing 路由
前言 最近打算抽时间看一下 ASP.NET Core MVC 的源码,特此把自己学习到的内容记录下来,也算是做个笔记吧. 路由作为 MVC 的基本部分,所以在学习 MVC 的其他源码之前还是先学习一下 ...
- ASP.NET Core MVC 源码学习:MVC 启动流程详解
前言 在 上一篇 文章中,我们学习了 ASP.NET Core MVC 的路由模块,那么在本篇文章中,主要是对 ASP.NET Core MVC 启动流程的一个学习. ASP.NET Core 是新一 ...
- ASP.NET Core MVC 控制器创建与依赖注入
本文翻译自<Controller activation and dependency injection in ASP.NET Core MVC>,由于水平有限,故无法保证翻译完全准确,欢 ...
随机推荐
- PHP Cron Expression Parser ( LARAVEL )
The PHP cron expression parser can parse a CRON expression, determine if it is due to run, calcul ...
- TP QQ 微信 微博登录
use Org\Util\QQconnect; use Org\Util\Wechatauth; use Org\Util\SaeTOAuthV2; use Org\Util\SaeTClientV2 ...
- [ES]ES查询指南
我们通常用用_cat API检测集群是否健康. 确保9200端口号可用: curl 'localhost:9200/_cat/health?v' 绿色表示一切正常, 黄色表示所有的数据可用但是部分副本 ...
- python连接Linux服务器
import paramikoimport os #当前脚本路径CUR_PATH = os.path.dirname(__file__) #服务器ipHost=''Port=22#登录用户名Usern ...
- maven web+spring mvc项目没有出现src/main/java路径
直接在main 文件夹下创建java可以解决 https://www.cnblogs.com/zhujiabin/p/6343462.html
- linux代码常用查询!!!!!!!!!!!!
字符串: echo "a b c d e f"|cut -d ' ' -f1 输出a echo "a b c d e f"|cut -d ...
- git舍弃文件更改
未进行任何提交,即文件更改在工作区 # filename 对应进行操作的文件名 git checkout -- filename 已用git add 命令提交,即文件更改在暂存区 # 舍弃暂存区的修改 ...
- 【Game】2048小游戏
每个男孩都有一个游戏梦吧,本例简单讲述一款很火的游戏<2048>的制作. 本例参考地址:https://www.imooc.com/learn/76 游戏准备 1.游戏的逻辑(2048大家 ...
- HDU3695(AC自动机模板题)
题意:给你n个字符串,再给你一个大的字符串A,问你着n个字符串在正的A和反的A里出现多少个? 其实就是AC自动机模板题啊( ╯□╰ ) 正着query一次再反着query一次就好了 /* gyt Li ...
- mysqldb mysql_config
在安装mysqldb Python的时候会用到mysql_config,但是正常安装的MySQL环境下是没有这个文件的,这个文件在Linux下是可执行文件,所以需要到mysql官方网站上下载MySQL ...