webpack 原理解析简述

如需转载 请与本人联系

面向读者

本文面向那些须要或者想了解开发 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原理