webpack运行过程(webpack打包原理)
webpack整个庞大的体系可以分为以下三部分：
1、构建的核心流程 2.loader 的作用 3、plugin 架构与常用套路复制代码
三者协作构成了webpack主体框架
核心流程解析
Webpack 最核心的功能：就是将各种类型的资源，包括图片、css、js等，转译、组合、拼接、生成 JS 格式的 bundler 文件，这个过程核心完成了 内容转换 + 资源合并 两种功能，实现上包含以下三个阶段：
初始化阶段：
初始化参数：从配置文件、 配置对象、Shell 参数中读取，与默认配置结合得出最终的参数
创建编译器对象：用上一步得到的参数创建
Compiler对象初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等
开始编译：执行
compiler对象的run方法确定入口：根据配置中的
entry找出所有的入口文件，调用compilition.addEntry将入口文件转换为dependence对象
构建阶段：
编译模块(make) ：根据
entry（入口文件）对应的dependence（依赖）创建module对象，调用loader将模块转译为标准 JS 内容，调用 JS 解释器将内容转换为 AST （抽象语法树）对象，从中找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理完成模块编译：上一步递归处理所有能触达到的模块后，得到了每个模块被翻译后的内容以及它们之间的 依赖关系图
生成阶段：
输出资源(seal) ：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的
Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会写入文件系统(emitAssets) ：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统
单词解释：
Entry：编译入口，webpack 编译的起点Compiler：编译管理器，webpack 启动后会创建compiler对象，该对象一直存活知道结束退出Compilation：单次编辑过程的管理器，比如watch = true时，运行过程中只有一个compiler但每次文件变更触发重新编译时，都会创建一个新的compilation对象Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系Module：webpack 内部所有资源都会以“module”对象形式存在，所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的Chunk：编译完成准备输出时，webpack 会将module按特定的规则组织成一个一个的chunk，这些chunk某种程度上跟最终输出一一对应Loader：资源内容转换器，其实就是实现从内容 A 转换 B 的转换器Plugin：webpack构建过程中，会在特定的时机广播对应的事件，插件监听这些事件，在特定时间点介入编译过程
作者：蛋蛋蛋973
链接：https://juejin.cn/post/7028819941298192414