webpack的编译过程
这里简单记录一下学习webpack的知识点吧。
webpack的编译过程主要有三步：
- 初始化
- 编译
- 输出
1. 初始化
我们在初始化一个项目的时候，如果使用的是webpack作为前端项目的构建工具，我们会在目录下新建一个webpack.config.js，这个文件主要是为做一些webpack编译的时候的一些配置相关信息
另外，我们也会安装一个webpack-cli作为一个命令行工具，这个工具主要是给我们在命令行工具使用相关的命令去让我们的webpack帮助我们做一些打包工作，我们在使用webpack-cli的时候，或许会带一些参数：
初始化的作用其实就是将你的配置工具，cli参数和默认的一些webpack工具做一个整合，形成一个最终的配置对象，这个过程是用yargs这个第三方库去做的，可以简单的理解为这个阶段就是生成一个最终的webpack配置。
2. 编译
2.1 创建chunk
chunk顾名思义就是一个块，我们根据某个入口，找到的所有依赖，结合起来我们就能说这是一个chunk，比方说我们的默认路口src下的index.js，我们就会根据这个路口创建一个chunk,每个chunk都有两个属性，一个name默认值为main，另一个是id，代表唯一编号，开发环境和name相同，生产环境是一个数字，从0开始。
2.2 构建所有依赖模块
根据配置文件找到入口模块，检查记录，如果说依赖的相关的模块有被记录，则直接从记录中获取，就此结束，如果没有记录到，则继续。首先的话webpack会读取文件的内容，为文件内容进行一些语法分析，形成一个AST抽象语法树，下面是转换之后的结果
根据这个抽象语法树，我们会把依赖记录到一个数组中，我们可以看下，比方说我有三个文件，index.js, a.js, b.js，代码如下：
// index.js
const a = require('./a.js')
const b = require('./b.js')
console.log(a, b)
// a.js
require("./b.js");
console.log("a.js");
console.log("bbb");
从入口index.js文件出发，我们可以得出三个依赖，一个是index.js，a.js,b.js,将这些依赖的文件路径放到一个数组中，然后我们会拿到入口的模块，将里面的依赖函数替换。比方说如果用了require函数，就替换为__ weboack __require函数,然后将转换后的代码，跟文件路径，也就是刚刚存到数组中的文件路径，做一个映射，存到模块记录表中。当然依赖数组中还包含a.js，b.js，执行流程也是跟index.js一样，读取文件内容，形成ast抽象语法树，记录依赖，替换依赖函数，这样的话在我们的模块记录中形成每个文件路径对应转换之后的一行代码，形式如下：
| 文件名 | 文件内容 |
|---|---|
| ./src/index.js | 转换后的代码xxx |
| ./src/a.js | 转换后的代码xxx |
| ./src/b.js | 转换后的代码xxx |
2.3 产生chunk assets
就如第二部所进行的，会形成模块列表，每个模块id对应文件内容接下来，webpack会根据配置为chunk生成一个资源列表，即chunk assets，资源列表可以理解为是生成到最终文件的文件名和文件内容，其实就是比方说你可能打包的时候，配置了开启source-map，那么这个.map文件就是assets里面的内容，其名字也是你配置的chunk名字这样子。比方说main.js，main.js.map。
可以看下，比方说我们配置entry:
打包之后，dist目录会生成map文件，像这些map文件，js文件集合起来都属于一个chunk的内容，我们把他们可以理解为chunk assets
当然上面的配置可以看到filename配置的有点不太一样，name的话代码chunk的名字也就是entry里面配置的，chunkhash的话代表是根据chunkassets的内容生成的一串hash字符串。
2.3 合并chunk assets
什么是合并chunk assets呢，就是webpack你的入口模块可能不仅一个，这样的话不就有多个chunk了嘛，这个步骤我们把这些多个chunk形成的chunk assets合并成一起。
3. 输出
这个步骤的话就是webpack利用node的fs模块，根据编译产生的总的assets，去生成对应的文件
以上的话就是我对webpack编译过程了解到的知识进行的简单总结
