深入浅出 webpack 源码解析（二）：构建前的准备阶段
2023-10-10 21:07:31
webpack 构建前的准备工作
在第一部分中，我们对 webpack 的整体架构和工作流程进行了概述。现在，让我们深入到 webpack 的源码中，看看构建前是如何进行准备工作的。
webpack 的构建过程主要由 webpack-cli 来驱动，webpack-cli 是 webpack 的命令行接口。在 webpack-cli/bin/cli.js 文件中，我们可以看到 webpack 的构建过程主要分为以下几个步骤：
- 解析命令行参数
- 创建 webpack 配置对象
- 加载 webpack 插件
- 创建编译器实例
- 运行编译器
解析命令行参数
在解析命令行参数的阶段，webpack-cli 会将命令行中输入的参数解析成一个对象，并将其存储在 argv 对象中。这些参数包括输入文件、输出文件、模式等。
const argv = require('yargs').argv;
创建 webpack 配置对象
在创建 webpack 配置对象阶段，webpack-cli 会根据命令行参数和默认配置创建一个 webpack 配置对象。这个配置对象包含了构建过程所需的各种配置信息，例如入口文件、输出文件、加载器、插件等。
const config = new webpack.Configuration(argv);
加载 webpack 插件
在加载 webpack 插件阶段，webpack-cli 会根据配置对象中的插件列表加载相应的插件。这些插件可以帮助 webpack 完成各种任务，例如压缩代码、生成 source map、提取 CSS 等。
const plugins = config.plugins.map((plugin) => {
return new plugin.constructor(plugin.options);
});
创建编译器实例
在创建编译器实例阶段，webpack-cli 会根据配置对象创建一个 webpack 编译器实例。这个编译器实例包含了构建过程所需的所有信息，包括配置对象、插件列表等。
const compiler = webpack(config);
运行编译器
在运行编译器阶段，webpack-cli 会调用编译器实例的 run 方法来启动构建过程。这个过程会经历初始化、编译、生成输出等多个阶段，最终生成构建结果。
compiler.run((err, stats) => {
// ...
});
小结
在这一部分中，我们详细分析了 webpack 在构建前的准备工作。我们了解到 webpack 是如何解析命令行参数、创建 webpack 配置对象、加载 webpack 插件以及创建编译器实例的。这些准备工作为 webpack 的构建过程奠定了基础。
在下一部分中，我们将深入到 webpack 的编译过程，看看 webpack 是如何将源代码编译成可执行代码的。
