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. IIS Express被局域网访问

    在 文件夹 C:\Users\administrator\Documents\IISExpress\config 下面 applicationhost.config 文件里 找到相应的项目 如 < ...

  2. Vim Plugins for Linux

    Usage 1.Set up Vundle: git clone https://github.com/VundleVim/Vundle.vim.git ~/.vim/bundle/Vundle.vi ...

  3. Hive学习(二)

    1.Hive数据导入 2.Hive的数据查询 3.Hive的Java客户端和自定义函数 1.Hive数据导入 (1.1)使用Load语句导入 HiveQL中提供LOAD DATA命令,用于导入数据到H ...

  4. MVCC(Multi-Version Concurrency Control)多版本并发控制机

    MVCC(Multi-Version Concurrency Control)是一种多版本并发控制机制.

  5. centOS和redHat防火墙开放端口

    发现在CentOS 7上开放端口用iptables没效果(或者是sodino没找到正确的命令,传说Centos7 下默认的防火墙是 Firewall,替代了之前的 iptables)… 使用firew ...

  6. LeanTouch控制移动

    Lean_Touch控制移动 using UnityEngine; using System.Collections; using System.Collections.Generic; using ...

  7. pat1057. Stack (30)

    1057. Stack (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Stack is one of ...

  8. 移动Web开发与适配笔记

    项目要是适配手机端,想透彻的把相关内容弄清楚,现在总结一下. 一.移动端开发有如下特点: 1.跑在手机端的web 页面就是h5页面 2.具有跨平台性(web 安卓 iOS都适应) 3.基于webvie ...

  9. CentOS搭建KMS服务器

    安装 使用命令: #CentOS,Redhat,Fedora等请选择CentOS脚本 wget https://raw.githubusercontent.com/dakkidaze/one-key- ...

  10. ViewData、ViewBag和TempData比较

    一.ViewData.ViewBag和TempData的定义 public dynamic ViewBag { get; } public ViewDataDictionary ViewData { ...