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 的原创文章，请关注公众号"汪子熙"。