【webpack】webpack基本工作原理

基本概念

在了解 Webpack 原理前，需要掌握以下几个核心概念，以方便后面的理解：

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

流程概括

Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

流程细节

Webpack 的构建流程可以分为以下三大阶段：

初始化：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
编译：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译文件内容，再找到该 Module 依赖的 Module，递归地进行编译处理。
输出：对编译后的 Module 组合成 Chunk，把 Chunk 转换成文件，输出到文件系统。

如果只执行一次构建，以上阶段将会按照顺序各执行一次。但在开启监听模式下，流程将变为如下：

源码分析

启动

{
  "scripts": {
    "start": "webpack --config ./config/webpack.config.js"
  }
}

npm script命令启动，指定配置，执行webpack cli

build命令初始化

命令类型为空时会默认走到build命令，初始化命令环境（准备命令所需依赖，初始化cli参数），在cli中获取到从webpack执行函数，然后进入构建流程。

创建compiler对象

由cli进入webpack

开始创建compiler

加载插件

加载的插件分为两种：

自定义plugins

由config.js配置文件中指定的plugins

module.exports = {
  //...
  plugins: [
    new webpack.DefinePlugin({
      // Definitions...
    }),
  ],
};

内置默认plugins

由webpack内置的插件，比如

devtool：EvalSourceMapDevToolPlugin、SourceMapDevToolPlugin
entry: EntryOptionPlugin
....

由此可以看出，其实webpack更像是一个通过tapable调度的plugins驱动器，具体的功能逻辑有一个个plugins完成

entry入口

插件加载过程中会根据配置文件中指定的entry找到入口

绑定compiler.hooks.make钩子回调，回调是对compilation的处理，然后看其创建过程。

开始编译

启动run

在前面初始化创建完compiler以后开始通过compiler.run执行编译

初始化编译配置---loader处理

加载loader配置获取最终配置

Tips

Module | webpack 中文文档

这里发现一个点，通过文档和源码发现 rules和oneOf是可以嵌套来使用的，但是从来没有实践过~

创建Compilation对象

模块的编译是由compilation对象来完成的，可以理解为一次构建过程中的上下文对象。

创建compilation对象后可以看到make hooks的调用触发，这时回到上面 entry入口处，可以看到在创建compiler对象阶段已经绑定了make hooks的事件，进入到compilation.addEntry

通过entry递归编译

addEntry 方法中又调用了 _addEntryItem 方法，将入口模块添加到模块依赖列表中；

紧接着通过 Compilation 对象的 buildModule 方法进行模块构建；

buildModule 方法中执行具体的 Loader，处理特殊资源加载；

build 完成过后，通过 acorn 库生成模块代码的 AST 语法树；

根据语法树分析这个模块是否还有依赖的模块，如果有则继续循环 build 每个依赖；

所有依赖解析完成，build 阶段结束；

最后合并生成需要输出的 bundle.js 写入 dist 目录。