webpack 4 源码主流程分析（二）：配置初始化

webpack 是一个现代化的 JavaScript 模块打包工具，它可以将许多小的模块打包成一个或多个较大的包，以便在浏览器中加载。webpack 4 是 webpack 的最新版本，它带来了许多新特性和改进。

在本文中，我们将深入分析 webpack 4 的源码，重点讲解配置初始化过程。从命令行执行 webpack 开始，到 webpack CLI 加载配置文件，再到解析配置文件并生成 Compiler 实例，我们将详细解析 webpack 的配置初始化过程，帮助读者理解 webpack 的工作原理。

命令行执行 webpack

当我们使用 webpack CLI 执行 webpack 命令时，webpack 会首先在当前目录下查找 webpack.config.js 文件。如果找到该文件，webpack 会将其加载并解析为一个 JavaScript 对象。该对象就是 webpack 的配置对象。

如果当前目录下没有 webpack.config.js 文件，webpack 会在父目录中继续查找，直到找到该文件或到达根目录。如果在根目录也没有找到该文件，webpack 会抛出一个错误。

webpack CLI 加载配置文件

当 webpack CLI 找到 webpack.config.js 文件后，它会使用 require 函数加载该文件。require 函数会将该文件解析为一个 JavaScript 对象，并将其返回给 webpack CLI。

webpack CLI 会将该 JavaScript 对象作为参数传递给 webpack 函数。webpack 函数会使用该对象来创建 Compiler 实例。

解析配置文件

Compiler 实例创建后，它会解析 webpack.config.js 文件中的配置。webpack.config.js 文件中的配置可以是一个简单的 JavaScript 对象，也可以是一个函数。

如果 webpack.config.js 文件中的配置是一个简单的 JavaScript 对象，Compiler 实例会直接将其解析为一个 JavaScript 对象。

如果 webpack.config.js 文件中的配置是一个函数，Compiler 实例会先将该函数调用，然后将函数的返回值解析为一个 JavaScript 对象。

生成 Compiler 实例

Compiler 实例创建后，它会执行一系列初始化操作，包括：

• 创建一个新的 Compilation 实例。
• 将 webpack.config.js 文件中的配置应用到 Compilation 实例。
• 创建一个新的 Resolver 实例。
• 创建一个新的 Tapable 实例。
• 创建一个新的 Watching 实例。

Compilation 实例用于管理此次打包过程中的所有资源和依赖。Resolver 实例用于解析模块的路径。Tapable 实例用于管理 webpack 的事件系统。Watching 实例用于监视文件的变化。

结论

在本文中，我们深入分析了 webpack 4 的源码，重点讲解了配置初始化过程。从命令行执行 webpack 开始，到 webpack CLI 加载配置文件，再到解析配置文件并生成 Compiler 实例，我们详细解析了 webpack 的配置初始化过程，帮助读者理解 webpack 的工作原理。