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的原理的更多相关文章

  1. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  2. tomcat第一次使用正常启动后访问8080端口报404错误

    问题:tomcat第一次使用正常启动后访问8080端口报404错误 解决办法:双击tomcat调出tomcat的xml文件页面,Server Locations 默认是选第一行即Use Workspa ...

  3. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  4. dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法

    dell r710 安装ubuntu 12.04 server 启动后进入initramfs解决办法 grub 启动菜单后加入 rootdelay=90, 如下:/boot/vmlinuz-2.6.3 ...

  5. [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 ...

  6. zato server启动后自动关闭问题解决

    症状 zato start server 启动server后,过一会server自动关闭了 解决 查看日志 UnicodeDecodeError: 'ascii' codec can't decode ...

  7. webpack dev server 配置 启动项目报错Error: listen EADDRINUSE

    Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题

  8. tomcat正常启动输入localhost:8080显示404错误

    找了半天才解决. 看这个贴子: https://www.cnblogs.com/lovelanglangyou/p/7410937.html 简而言之: 需要修改eclipse中的server配置,e ...

  9. webpack dev server 和 sublime text 配合时需要注意的地方

    参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...

随机推荐

  1. java读取配置到Hash表里

    import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; im ...

  2. drozer与adb工具的安装与使用

    drozer:链接: https://pan.baidu.com/s/1skTJdgh 密码: wah1 adb:链接: https://pan.baidu.com/s/1gfpIkuv 密码: n8 ...

  3. Spring boot的热部署

    当把配置文件,比如yml也打到jar包后,如何修改配置,而又不用重新发布呢? 在jar包同一目录下,放置Application.yml (注意,不管jar包内是否此文件名)修改配置文件后,重新启动ja ...

  4. C语言指针收藏

    指针是什么 >>每一个内存单元只能同时存储一个数据,如何保证内存单元同时只能存储一个数据,可以使用编号的方式实现内存单元标记,此编号就是指针. >>指针是一个变量,指针是存放着 ...

  5. vue+iview中的table表格导出excel表格

    一.iveiw框架中table中有exportCsv()方法可以导出.csv后缀文件,类似于excel文件,但是并不是excel文件. 二.实现table表格导出excel文件利用Blob.js 和 ...

  6. Git简单上传和下载

    本文参考 git-简易指南 编写 上传本地代码到gitHub仓库 第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令 git init 第二步:将项目的所有文件添加到仓库中 git a ...

  7. JVM调优总结-Xmx -Xms -Xmn -Xss

    堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit)限制:系统的可用虚拟内存限制:系统的可用物理内存限制.32位系统下,一般限制在1.5G~2G:64为操作 ...

  8. Django-5.1 模型层 单表操作

    7.1 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开 ...

  9. python 利用正则表达的式提取特定数据如手机号

    import re file=open('1.txt','r') listfile=file.readlines() listfile=','.join(listfile)#合并文本 listfile ...

  10. KEIL的多工程多目标

    https://blog.csdn.net/ybhuangfugui/article/details/51655502 https://mp.weixin.qq.com/s/CSUa4zegzz8JW ...