1. webpack 启动过程分析

1.1 查找和运行 webpack 入口文件

webpack 官方文档：

对于大多数项目，我们建议本地安装。这可以在引入突破式变更(breaking change)版本时，更容易分别升级项目。通常会通过运行一个或多个 npm scripts 以在本地 node_modules 目录中查找安装的 webpack，来运行 webpack：

  1. "scripts": {
  2.     "build": "webpack --config webpack.config.js"
  3. }

想要运行本地安装的 webpack，你可以通过 node_modules/.bin/webpack 来访问它的 bin 版本。

npm run dev/npm run build，找启动文件，Linux 和 Mac 找 webpack.sh，Windows 找 webpack.cmd。
一个 npm 包，通过在自身的 package.json 指定 bin 字段，才会出现在用户的 node_modules/.bin/ 目录下。

实际的入口文件是：node_modules\webpack\bin\webpack.js。

1.2 分析 webpack 的入口文件：webpack.js

2. webpack-cli 源码阅读

3. Tapable 插件架构与 Hooks 设计

4. Tapable 是如何和 webpack 进行关联的？

5. webpack 流程篇：准备阶段

6. webpack 流程篇：模块构建和 chunk 生成阶段

7. webpack 流程篇：文件生成

8. 编写一个简易的 webpack（上）

9. 编写一个简易的 webpack（下）

Webpack 运行流程

  1. 解析配置：启动构建，读取与合并配置参数，加载 Plugin，实例化 Compiler。
  2. 编译&构建：从entry入口开始递归所有依赖模块进行读取和使用loader翻译，并构建依赖图。
  3. 封装模块&输出：若未配置代码分割&异步加载模块的情况下，每个entry生成一个独立bundle；否则可能会被拆分为多个chunk，最终有多个结果文件。

Webpack 插件机制

Plugin 可以做任何 Loader 做不了的事情。
开发者可以通过编写 Plugin 在 Webpack 对外暴露的事件钩子中，获取当前编译信息或完成一些操作以达到扩展 Webpack 功能的目的，所有的事件钩子都基于 Webpack 的运行流程生命周期。

核心是 webpack 内部库 Tapable。Tapable 提供了基于发布订阅模式（观察者模式或事件流）的架构：

  • 注册事件监听 tap
  • 触发指定事件 call

webpack 中许多对象扩展自 Tapable 类，Tapable 提供了这个类暴露 tap, tapAsync 和 tapPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。

compiler 和 compilation 都继承自 Tapable，好理解，因为都需要事件流这种能力/机制。

  • compiler 暴露了和 Webpack 整个生命周期相关的钩子
  • compilation 暴露了与模块和依赖有关的粒度更小的事件钩子

不同的钩子允许使用的 tap 方法可能不同。