📄Webpack 构建过程
type
status
date
slug
summary
tags
category
icon
password
Status
简单讲：
webpack从启动到结束是一个串行的过程（五大核心： entry，output，loader，plugin，mode），依次执行步骤：
- 主要是处理参数，从配置文件和
Shell语句中去读取与合并参数，还包括初始化要用到的插件及其执行所需要的参数。
- 用参数去生成一个 Compiler 对象，并执行它的run方法。
- 找到 entry 配置的入口文件，从入口发出，调用对应的 loader 去处理模块，再找到模块依赖的模块，递归地进行编译处理，直到所有入口依赖的文件都经过处理了。
- 经过编译模块阶段已经得到模块依赖链了，最后就是把编译后的模块组合成一个个包含多个模块的chunk，把 chunk 转换成单个文件，加载到输出列表。此时是最后能修改文件内容的时机。
- 根据配置确定输出的路径和文件名，写入文件系统。
具体来讲：可以分成三个阶段：初始化、编译构建、输出
初始化
webpack将webpack.config.js中的各个配置项拷贝到options对象中，并加载用户配置的plugins
- 完成之后开始初始化
Compiler编译对象，该对象掌控着webpack生命周期（plugin原理，监听事件去改变webpack得到的结果），不执行具体的任务，只是进行一些调度工作。
编译构建
根据配置中的
entry 找出所有的入口文件初始化完成后会调用
Compiler的run来真正启动webpack编译构建流程，主要流程如下：compile开始编译
make从入口点分析模块及其依赖的模块，创建这些模块对象
build-module构建模块
seal封装构建结果
emit把各个chunk输出到结果文件
compile 编译
执行了
run方法后，首先会触发compile，主要是构建一个Compilation对象。该对象是编译阶段的主要执行者，主要会依次下述流程：执行模块创建、依赖收集、分块、打包等主要任务的对象。make 编译模块
当完成了上述的
compilation对象后，就开始从Entry入口文件开始读取，主要执行_addModuleChain()函数，如下：过程如下：
_addModuleChain中接收参数dependency传入的入口依赖，使用对应的工厂函数NormalModuleFactory.create方法生成一个空的module对象。回调中会把此
module存入compilation.modules对象和dependencies.module对象中，由于是入口文件，也会存入compilation.entries中。随后执行
buildModule进入真正的构建模块module内容的过程。build module 完成模块编译
这里主要调用配置的
loaders，将我们的模块转成标准的JS模块。在用
Loader 对一个模块转换完后，使用 acorn 解析转换后的内容，输出对应的抽象语法树（AST），以方便 Webpack后面对代码的分析。从配置的入口模块开始，分析其
AST，当遇到require等导入其它模块语句时，便将其加入到依赖的模块列表，同时对新找出的依赖模块递归分析，最终搞清所有模块的依赖关系。输出流程
seal 输出资源
seal方法主要是要生成chunks，对chunks进行一系列的优化操作，并生成要输出的代码webpack 中的 chunk ，可以理解为配置在 entry 中的模块，或者是动态引入的模块根据入口和模块之间的依赖关系，组装成一个个包含多个模块的
Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表emit 输出完成
在确定好输出内容后，根据配置确定输出的路径和文件名
在
Compiler 开始生成文件前，钩子 emit 会被执行，这是我们修改最终文件的最后一个机会。从而webpack整个打包过程则结束了。总结
- Twikoo