如需转载 请与本人联系
面向读者
本文面向那些需要或者想了解开发 webpack plugin 和想要深究 webpack 源码但是无处下手的人群。这篇文章会带你大致了解 webpack 原理与执行流程，具体的源码限于篇幅暂不讨论，后面会考虑出一系列 webpack 源码解析系列与 webpack 经典插件解析。
webpack 初始化流程
webpack是基于插件体系的构建工具，插件的具体实现方式是依赖与tapable库，当我们在本地执行 webpack 构建是，会调用 webpack(option) 方法，之后会对 option 做一次校验合法性并做默认选项赋值，然后调用envplugin，这个插件主要是对fs做一层缓存，然后在每次编译前对缓存做一次清除，之后再调用 WebpackOptionsApply 绑定webpack核心流程自带需要的所有插件。如果你打开这个文件你会发现绑定的插件非常多，这里重点提一下你需要关注一下以下插件：
LoaderTargetPlugin
JavascriptModulesPlugin
EntryOptionPlugin
RuntimePlugin
CompatibilityPlugin
HarmonyModulesPlugin
CommonJsPlugin
LoaderPlugin
CommonJsStuffPlugin
RequireContextPlugin
NamedChunkIdsPlugin
NamedModuleIdsPlugin
TemplatedPathPlugin
其余插件全部注释掉保留以上插件，运行 webpack 基础功能依然可用，即只需要以上插件既可以形成一个mini版的webpack，这也是我们阅读源码时关注的重点所在。
到此为止完成了webpack初始化的一些配置，接下来会调用 webpack.run 方法执行编译流程
编译流程
run 阶段首先会初始化compication（这个对象时每次编译都会重新生成的对象）。
接下来调用 make 插件触发编译流程，这里会获取我们option中配置的 entry 对象。通过 resolvefactory 根据这个entry对象查询文件的context ，绝对路径，项目依赖以及相关 loader匹配 等信息，依据这些创建为一个入口模块。创建完成后会执行编译，这里主要时通过 runloader 执行我们的匹配的 loader ，并将结果存储到模块中，执行完毕后会执行 parse 插件，这是会调用webpack魔改的arcon生成ast并遍历ast语法树，webpack对ast遍历的estree的每个节点设置不同的 parse hook 比如如果我们想要对import做处理我们需要在ast 节点中的 ImportDeclaration对应的plugin中绑定具体的执行函数，webpack中通过HarmonyModulesPlugin对ast扫描import与exprt语法，来生成 entry 入口文件的依赖文件，这样就可以形成递归，即对这些依赖文件继续创建为模块，执行loader，扫描ast等操作，到此为止就构成了整个文件的加载扫描与执行loader等过程。
接下来会调用finish 执行webpack的一些错误异常处理，再之后通过调用seal 插件，初始化chunkGraph，entryPoint，执行文件拼接，生成assertfile，再写入本地文件， 到此整个编译流程执行完毕
总结
以上只是webpack执行的简单流程解析，可以帮助你阅读源码以及插件的执行时间点，当然webpack远不止这些，每个执行流程可以都包含一大块东西要说，比如resolvefactory、runloader、estree、缓存等，还有其他的一些优化类的插件，有时间后续会出一些列插件源码解析，帮助深入理解webpack原理