English
资源说明：前言
Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 Webpack 的配置中，增加 devServer 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webpack-dev-middleware 则是这个包的底层依赖。
截至本文发表前，webpack-dev-middleware 的最新版本为 webpack-dev-middleware@3.7.2，本文的源码来自于此版本。本文会讲解 webpack-dev-middleware 的核心模块实现，相信大家把这篇文章看完，
**webpack-dev-middleware** 是一个核心的中间件，用于支持 **webpack-dev-server** 的本地开发环境。它在 **webpack** 的构建过程中起到了关键作用，尤其是在快速迭代和实时更新的开发场景下。在 **webpack** 配置中添加 `devServer` 选项启动开发服务器时，实际就是利用了 **webpack-dev-middleware** 和 **webpack-dev-server**。
**webpack-dev-middleware** 的主要功能包括：
1. **Watch Mode**: 它以监听模式启动 **webpack**，在源文件发生变化时自动重新编译，生成最新的 bundle。
2. **中间件机制**: 作为 **Express** 或其他 Node.js 服务器框架的中间件，它接收并处理 HTTP 请求，将内存中的资源直接响应给客户端，避免了硬盘上的 I/O 操作带来的延迟。
3. **资源缓存**: **webpack** 编译的结果存储在内存中，提高了访问速度和开发效率。
4. **延迟请求**: 在编译期间，如果资源正在更新，它会暂停对旧版 bundle 的服务，直到新的编译完成。
5. **写入磁盘选项**: 可选地，可以通过配置让 **webpack-dev-middleware** 将编译结果写入磁盘，这对于某些情况（如热替换）可能是必要的。
在源码解读方面，**webpack-dev-middleware** 的核心代码位于 `lib` 目录下的 `index.js` 和 `middleware.js` 文件。`index.js` 是入口文件，它接收 **webpack** 的 `compiler` 和配置对象，创建并返回中间件函数。`middleware.js` 包含了中间件的主要逻辑，如设置监听器、处理 HTTP 请求、管理和更新内存中的资源等。
在 `index.js` 中，`setupHooks(context)` 函数用于设置与 **webpack** 编译相关的钩子，确保在编译开始和结束时执行相应的操作。`compiler.watch` 启动监听模式，监控文件变化并触发重新编译。中间件函数则处理来自 Express 的请求，通过 `handleRequest` 函数将请求传递给 `middleware.js` 进一步处理。
在 `middleware.js` 中，核心功能包括处理 HTTP 响应（如处理范围请求的 `handleRangeHeaders.js`），准备输出文件系统（`setupOutputFileSystem.js`），报告编译状态（`reporter.js`）以及在内存中管理资源的读取和更新。这些功能协同工作，确保了 **webpack-dev-middleware** 能够高效地支持开发服务器的需求。
通过深入理解 **webpack-dev-middleware** 的源码，开发者可以更好地优化本地开发环境，解决与实时更新和性能相关的问题，提升开发效率。同时，对于想要自定义开发服务器行为或扩展 **webpack** 功能的开发者来说，源码分析也是必不可少的步骤。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
