webpack4源码流程图

new Webpack()

build-module

。run()：编译的入口方法。compiler具体划分为两个对象      . Compiler：存放输入输出相关配置信息和编译器Parse对象      . Watching：监听文件编号的一些处理方法

tapable: 贯穿整个webpack，实现                插件绑定与调用的库。apply()，plugin(): 通过各自插件中的apply方法调用tapable的plugin方法，将插件添加到compiler对象。applyPlugins()，applyPluginsWaterfall(): 同步去调用插件的apply()，使插件对象再去调用plugin()。applyPluginsAsyns()，applyPluginsAsyncWaterfall: 异步调用

make

after-compile

buildModule()

事件节点

。webpack初始化      . 构建compiler对象      . WbpackOptionsApply首先会初始化几个基础插件，然后把options中对应的选项进行require      . 初始化compiler的上下文，loader和file的输入输出环境

。run触发compiler，接下来就是开始构建options中模块。 构建compilation对象      . 该对象负责组织整个编译过程，包含了每个构建环境所对应的方法      . 对象内部保留了对compile对象的引用，并且存放所有modules，chunks，            生成assets以及最后用来生成最后js的template

module.source()

emit

_addModuleChain()

options

ModuleTemplate.render()

run()

。 compile中触发make事件并调用addEntry。 找到入口js文件，进行下一步的模块绑定

optimist

MainTemplate.render()

webpack.config.js

addEntry()

entry-options

compile()

compile

。 解析入口js文件，通过对应的工厂方法创建模块，保存到compilation对象上（通过单例模      式保证同样的模块只有一个实例）。 对module进行build了，包括调用loader处理源文件，使用acorn生成AST并且遍历AST，      遇到require等依赖时，创建依赖Dependency加入依赖数组。 module已经build完毕，此时开始处理依赖的module。 异步的对依赖module进行build，如果依赖中仍有依赖，则循环处理其依赖

option初始化

Compiler开始输出生成的assets插件有最后的机会修改assets

。 所有的module，chunk仍然保存的是通过一个个require()聚合起来的代码，需要通过               Template产生最后带有__webpack_require()的格式。 MainTemplate: 处理入口文件的module    ChunkTemplate: 处理非首屏，需要一部加载的module

Compiler.emitAssets()

。调用seal方法封装，逐次对每个module和chunk进行整理，生成编译后的源码，合并，拆      分。每一个chunk对应一个入口文件。开始处理最后生成的js

创建模块

完成所有模块的构建结束编译过程

。 通过emitAssets将最终的js输出到output的path中

开始编译

分析入口文件创建模块对象

. optimist: Optimist is a node.js library for option parsing for people who hate option parsing. 解析shell与config中的配置项，用于激活webpack的加载项和插件

addModuleDependencies()

after-emit

createChunkAssets()

shell options

输出完成

seal()

ChunkTemplate.render()