总结: 通过各种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
太多了，晚点看……
网友评论