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 ...
随机推荐
- 优先队列priority_queue的简单应用
优先队列 引入 优先队列是一种特殊以及强大的队列. 那么优先队列是什么呢? 说白了,就是一种功能强大的队列. 它的功能强大在哪里呢? 四个字:自动排序. 优先队列的头文件&&声明 头文 ...
- newFixedThreadPool固定线程使用
1.newFixedThreadPool固定线程池, 使用完毕必须手动关闭线程池, 否则会一直在内存中存在, package ThreadTest; import java.util.concurr ...
- Linux内核模块简单示例
1. Linux 内核的整体结构非常庞大,其包含的组件也非常多,使用这些组件的方法有两种: ① 直接编译进内核文件,即zImage或者bzImage(问题:占用内存过多) ② 动态添加 * 模块本身并 ...
- Install NGINX, PHP-FPM (5.6) on CentOS 6
Installing NGINX with PHP on CentOS 6 can be a hassle depending on the install and packages you use. ...
- 关于imageview matrix
Matrix 是 Android SDK 提供的一个矩阵类,它代表一个 3 X 3 的矩阵 那么这 9 个浮点数的作用和意义是什么呢,从 Android 官方文档上看,它为这个数组中的每一个元素都定义 ...
- stm32 输入捕获学习(一)
输入捕获模式可以用来测量脉冲宽度或者测量频率.STM32 的定时器,除了 TIM6 和 TIM7,其他定时器都有输入捕获功能.STM32 的输入捕获,简单地说就是通过检测 TIMx_CHx 上的边沿信 ...
- DEDE SQL标签可以获取文档静态链接地址
在DedeCMS的系统里面,我可以通过由使用SQL语句来配合织梦标签进行更多的个性化调用.比如:推荐会员.推荐企业等.但是我们发现文档链接的底层模板地址的是动态的,那么我们要如何来进行转换,让他链接到 ...
- Linux kernel rbtree
Linux kernel rbtree 因编写内核模块时需要用到rbtree来记录异步request,研究分析了一下kernel rbtree的使用方法,记录于此.本文主要参考了内核文档rbtree. ...
- 同源策略引发对跨域jsonp跨域的理解
一,同源策略其实网络的安全基石,既:http://www.baidu.com:80协议(http或者HTTPS或者ws或者wss).域名(www.baidu.com).端口(默认80,可以不写 htt ...
- Ubuntu上的相关问题
一.解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题 在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由 ...