webpack-dev-server启动后, localhost:8080返回index.html的原理
webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。
webpack-dev-server主要用于前端项目的本地开发和调试。
具体使用，只需要在package.json的devDependencies里添加它的依赖即可。
同样在package.json里定义dev script，执行该webpack-dev-server, 这样用命令行npm run dev就可启动webpack-dev-server.
其原理是，npm install后，webpack-dev-server.js就会自动出现在当前项目文件夹的node_modules目录里：
Webpack-dev-server.js的服务器实例通过关键字new创建出来：
在Server.js的内部实现里，第76行我们就能观察到该服务器采用nodejs的express模块实现。
Express实例创建后，通过第78行app.all('*', ... )挂接处理函数，这个箭头函数(req,res,next) => { 负责处理所有发往这个服务器的HTTP请求。
第92行就是Server.js里webpackDevMiddleware的初始化过程。
现在我们就来看看浏览器里输入localhost:8080后会发生什么事情。
根据前面的描述，浏览器发起前往localhost:8080的请求被webpackDevMiddleware服务，见下图调试截图，其中变量req.url为/，这是我们期望看到的，因为localhost:8080后面没有跟任何路径。
最终会将执行流投递到processRequest函数里，第53行代码说明，如果HTTP请求路径/后没有子路径，则默认返回一个硬编码的index.html
谜团就这样解开了。
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
要获取更多Jerry的原创文章，请关注公众号"汪子熙":
webpack-dev-server启动后, localhost:8080返回index.html的原理的更多相关文章
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- tomcat第一次使用正常启动后访问8080端口报404错误
问题:tomcat第一次使用正常启动后访问8080端口报404错误 解决办法:双击tomcat调出tomcat的xml文件页面,Server Locations 默认是选第一行即Use Workspa ...
- 笔记：配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法
dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法 grub 启动菜单后加入 rootdelay=90, 如下:/boot/vmlinuz-2.6.3 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- zato server启动后自动关闭问题解决
症状 zato start server 启动server后,过一会server自动关闭了 解决 查看日志 UnicodeDecodeError: 'ascii' codec can't decode ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- tomcat正常启动输入localhost:8080显示404错误
找了半天才解决. 看这个贴子: https://www.cnblogs.com/lovelanglangyou/p/7410937.html 简而言之: 需要修改eclipse中的server配置,e ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
随机推荐
- POJ-2112 Optimal Milking(floyd+最大流+二分)
题目大意: 有k个挤奶器,在牧场里有c头奶牛,每个挤奶器可以满足m个奶牛,奶牛和挤奶器都可以看成是实体,现在给出两个实体之间的距离,如果没有路径相连,则为0,现在问你在所有方案里面,这c头奶牛需要走的 ...
- CHUCK手把手带你搞定OPENSTACK
一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初重要 ...
- python练习六十五：类的使用实例
代码: class human(): #定义基类,包括属性和方法 def __init__(self,name,eye=2,age=98,city='陕西'): #属性值有四个,分别为name,eye ...
- Linux安装Sqlmap等工具
简单记录一下安装过程,都是小白教程,省的哪天又忘了要去百度. 1.下载sqlmap 源码进行安装 wget https://github.com/sqlmapproject/sqlmap/tarbal ...
- vmware虚拟机提示：无法将Ethernet0连接到虚拟网络vmnet02018-03-07
编辑——虚拟机网络编辑——还原虚拟机网络配置可以解决
- java——最大堆 MaxHeap
使用数组来实现最大堆 堆是平衡二叉树 import Date_pacage.Array; public class MaxHeap<E extends Comparable <E>& ...
- SQL智能提示插件——SQLPrompt
1.安装SQLPrompt,直接点击下一步即可,然后打开SQL Server 在菜单栏找到SQLPrompt选项注册该软件 2.先断开网络,然后运行注册机,将注册吗复制到序列号的地方,将两个勾选的复选 ...
- tomcat异常[1]--java.lang.ClassNotFoundException: XXXX.EncodingFilter
EncodingFilter类在java项目中,确实存在,但是启动项目时,总是说找不到这个类. 后来想了一下,项目运行取的应该是项目WEB-INF/classes下面已经编译为.class文件的类文件 ...
- tcp的半连接与完全连接队列（二）
队列及参数 server端的半连接队列(syn队列) 在三次握手协议中,服务器维护一个半连接队列,该队列为每个客户端的SYN包开设一个条目(服务端在接收到SYN包的时候,就已经创建了request_s ...
- 用一层for循环初始化三维数组
][][]; ; i < * * ; i++) { a[i / ][(i / ) % ][i % ] = i; printf(, (i / ) % , i % ); // printf(&quo ...