揭秘 webpack 5 的幕后监视系统：逐行代码解析
2023-11-11 03:36:41
引言
作为前端开发领域的基石，webpack 已成为构建和打包 JavaScript 项目的不可或缺的工具。其最新的版本 webpack 5 引入了诸多改进和新特性，其中 watch 系统的优化尤为显著。为了解开 webpack 5 监视系统的运作原理，我们踏上了探索其源码的旅程。本文旨在为读者提供一份详细的源码指南，逐行解析事件流转和代码调用过程，让您深入了解 webpack 5 的幕后运行机制。
事件流转
webpack 5 的监视系统建立在事件流之上，当文件系统发生变化时，会触发一系列事件。以下是整个事件流的概述：
- 文件系统事件： 文件或目录发生更改时，文件系统会发出事件，由 Node.js 的
fs.watch()函数捕获。 - webpack 事件： fs.watch() 函数捕获文件系统事件后，会向 webpack 发出
FileSystemChangedEvent事件。 - 编译器事件： webpack 监视器收到
FileSystemChangedEvent事件后，会触发Compiler.FileSystemChangedEvent事件，并调用handleFileSystemChanged()方法。 - 重新编译：
handleFileSystemChanged()方法检查文件系统更改，如果需要，将触发重新编译过程。
代码调用
在事件流的每个步骤，都会调用特定的代码段。以下是关键代码调用的概述：
- 文件系统事件：
- Node.js
fs.watch()函数负责监视文件系统更改。
- Node.js
- webpack 事件：
webpack/lib/webpack/Watcher.js中的emitFileSystemChanged函数发出FileSystemChangedEvent事件。
- 编译器事件：
webpack/lib/webpack/Compiler.js中的handleFileSystemChanged方法处理FileSystemChangedEvent事件。
- 重新编译：
webpack/lib/webpack/Compiler.js中的recompile方法负责触发重新编译过程。
深入剖析
让我们深入剖析 webpack/lib/webpack/Watcher.js 中的 handleFileSystemChanged 方法，该方法负责处理 FileSystemChangedEvent 事件：
handleFileSystemChanged(event) {
// ...
if (this.paused) return;
const fse = this.compiler.fs;
// ...
const { fileTime, dependencies } = fse.stat(file);
// ...
this.invalidateOnFileSystemChanged(file, fileTime, dependencies);
}
在这个方法中，我们首先检查 watch 是否已暂停，如果是，则立即返回。然后，我们获取编译器的文件系统实例并检索文件状态。最后，我们调用 invalidateOnFileSystemChanged 方法，该方法负责标记受影响的文件为无效，并触发重新编译过程。
其他注意事项
除了事件流转和代码调用之外，还有其他一些需要考虑的注意事项：
- 监视模式： webpack 提供了不同的监视模式，包括
aggregate（默认）、polling和watchPolling。 - 忽略模式： 可以通过
ignored选项配置webpack，以忽略某些文件或目录的更改。 - 防抖： webpack 监视器内置了防抖机制，可防止过多的不必要重新编译。
结论
通过对 webpack 5 监视系统源码的逐行解析，我们深入了解了其事件流转和代码调用过程。我们探索了文件系统事件、webpack 事件、编译器事件和重新编译过程之间的交互。通过掌握这些底层机制，我们能够更好地理解和配置 webpack 5 的监视系统，以优化我们的构建和打包工作流程。随着 webpack 的持续发展，我们期待在未来的版本中看到更强大的监视功能。
