webpack从源码来粗略谈一谈

总结: 通过各种plugin处理各种文件资源。

我看webpack 源码的先后顺序大致为：

文件顺序

1. package.json里是一些基本设置

2. lib/webpack.js 和 bin/webpack.js 是webpack的执行入口
代码里可查看到webpack对入参的处理，一些初始化操作，以及输出对象类型

3.webpack 的核心compiler
webpack 的 Compiler 模块是主引擎，它通过 webpack CLI 或 webpack API 或 webpack 配置文件传递的所有选项，创建出一个 compilation 实例。

Compiler 也是我们所说的 Tapable 实例。通过这种实现机制，我们可以理解为，它混合(mix)了 Tapable类，来使实例也具备注册和调用插件功能。大多数面向用户的插件，要首先在 Compiler 上注册。Compiler 运行机制可以被提取为以下要点

lib/webpack.js 源码

* 通常有一个 Compiler 的主实例。可以创建子 compilers 来委托特定任务。

* 创建 compiler 的多数复杂度，在于为它填充所有相关的 options 选项。

* webpack 通过 WebpackOptionsDefaulter 和 WebpackOptionsApply，来专门为 Compiler 提供所需的所有初始数据。

* Compiler 是一个执行最简功能，来保证生命周期运行的函数。它把所有的加载(loading)/打包(bundling)/写入(writing)工作委托给各种插件。

* plugin.apply(compiler) 将插件注册到 Compiler 生命周期中的任何特定钩子事件。

* Compiler 暴露 run 方法，它启动了 webpack 所有编译工作。在执行完成后，会调用传递给它的 callback 函数。记录 stats 和 errors 的所有末端工作，都在此回调函数中完成。

4. compiler 的核心tapable
以下摘自官网:
Tapable 是一个小型的库，允许你对一个 javascript 模块添加和应用插件。它可以被继承或混入到其他模块中。类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和处理。除此之外，Tapable 还允许你通过回调函数的参数，访问事件的“触发者(emittee)”或“提供者(producer)”。

个人理解：

tapable 类似于事件处理，可注册各种事件+回调， 在webpack中用于各种插件注册和处理。
pulgin 函数相当于事件on

applyPlugin 相当于事件的emit

tapable 查看代码文件路径顺序为：Tapable.js -> SynicBailHook.js -> Hook.js

5. 各种plugin

太多了，晚点看……