庖丁解牛Webpack源码（一）：抽丝剥茧编译器Compiler对象的构建过程

2023-09-02 11:51:58

webpack 是一个现代前端构建工具，被广泛用于 JavaScript 项目的构建。它能将各种格式的模块转换为可用代码，并生成可供浏览器运行的最终文件。为了更好地掌握 webpack 的使用，我们有必要深入其源码，了解其内部机制。

本次旅程，我们将首先探究 Compiler 对象的构建过程。Compiler 是 webpack 的核心组件，负责整个构建流程的协调和管理。让我们一起抽丝剥茧，深入理解 webpack 的奥秘。

编译器Compiler的构建过程

初始化Compiler对象

当我们执行 webpack(options) 时，webpack 会首先初始化一个 Compiler 对象。这个对象负责整个构建过程的协调和管理。Compiler 的构建过程可以分为以下几个步骤：
加载配置文件

webpack 会首先加载配置文件，也就是 webpack.config.js 文件。这个文件定义了 webpack 的各种配置信息，如入口文件、输出文件、模块解析规则等。
创建Compilation对象

在加载配置文件之后，webpack 会创建一个 Compilation 对象。Compilation 对象负责管理本次构建过程中的所有信息，包括模块、资源、依赖关系等。
应用插件

webpack 会根据配置文件中的配置，应用各种插件。插件可以扩展 webpack 的功能，并为构建过程添加额外的功能。
初始化模块系统

webpack 会初始化模块系统，并解析入口文件。模块系统负责将源代码中的模块解析成 webpack 能够理解的格式。
构建模块图

webpack 会构建模块图，记录所有模块之间的依赖关系。模块图是 webpack 进行代码分割和代码生成的基础。
代码分割

webpack 会根据模块图进行代码分割，将代码拆分成多个独立的块。代码分割可以提高构建速度，并减少最终文件的体积。
代码生成

webpack 会根据模块图和代码分割的结果，生成可供浏览器运行的最终文件。最终文件通常包含多个 JavaScript 文件和一个 CSS 文件。
热更新

webpack 提供了热更新功能，当源代码发生变化时，webpack 可以快速更新浏览器中的代码，而无需重新加载整个页面。热更新可以大大提高开发效率。