webpack构建

一、 webpack构建流程

1、初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
2、开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件和内部插件，执行run方法(compiler)开始编译
3、确定入口，通过entry找到入口文件
4、编译模块，从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
6、输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
7、输出完成，确定输出的路径和文件名，把内容写到文件系统中

在以上过程中，webpack会在特定的时间点广播出特定的事件，插件在监听感兴趣的事件后会执行特定的逻辑，改变webpack的运行结果。 

 二、源码版本

 （1）初始化参数

webpack-cli做的事：

1、webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options

2、最终会根据配置参数实例化 webpack 对象，然后执行构建流程 

（2）开始编译

webpak.js文件

1、WebpackOptionsApply

作用：将所有的配置 options 参数转换成 webpack 内部插件

（3）确定入口

compiler.js文件

1、compiler.run里调用compile方法，里面触发了make的hooks

2、插件SingleEntryPlugin监听到后调用compilation的addEntry开始构建

（4）编译模块

1、compilation的addEntry调用_addModuleChain，_addModuleChain里调用buildModule，buildModule里调用module.build，module存在于NormalModule.js文件中

2、NormalModule.js文件中的build方法调用doBuild调用runLoaders，runLoaders来自loader-runner，调用 loader 将模块转译为标准 JS 内容。

3、doBuild调用完后会执行parser解析，将JS生成AST，通过遍历AST收集依赖，循环此过程。

4、最终输出内容和依赖关系

 三、webpack的编译都按照下面的钩子调用顺序执行

 四、ModuleFactory

 （1）类别

//module.exports = function(){} require('xxx')  import 'xxx'
const NormalModuleFactory = require("./NormalModuleFactory");
//带路径 .src/a
const ContextModuleFactory = require("./ContextModuleFactory");

 （2）module

（3）NormalModule的build

• 使用 loader-runner 运行 loaders
• 通过 Parser 解析 (内部是 acron) 
• ParserPlugins 添加依赖 

 五、Chunk 生成算法

1、webpack 先将 entry 中对应的 module 都生成一个新的 chunk

2、 遍历 module 的依赖列表，将依赖的 module 也加入到 chunk 中

3.、如果一个依赖 module 是动态引入的模块，那么就会根据这个 module 创建一个新的 chunk，继续遍历依赖

4.、重复上面的过程，直至得到所有的 chunk 

六、webpack模块机制

 七、模块解析包

@babel/parser：将获取到的模块内容解析成AST（es6的）语法树(以前叫babylon)

@babel/traverse: 遍历AST语法树，可以分析模块之间的依赖关系（通过 babel-traverse 的 ImportDeclaration 方法获取依赖属性）

@babel/core @babel/preset-env：ES6的AST转化成ES5的AST，并重新生成源码

八、compiler和compilation的hooks参考文档

compiler 钩子 · webpack 中文文档(v4.15.1)https://webpack.html.cn/api/compiler-hooks.html