webpack———编译过程webpack———编译过程持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 12 天，点击查看活动详情

webpack———编译过程

介绍

webpack 是一个用于现代 JavaScript 应用程序的静态打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，他们均为静态资源，用于展示你的内容。

编译流程

webpack 的编译流程分为三部分：初始化、编译、输出。

初始化

初始化就是将项目当中的所有配置整个成一个最终的配置，比如 webpack.config.js，cli 中的配置与参数和默认配置。对配置的处理有第三方库yargs完成。

这个阶段主要是为接下来的编译做准备，插件的注册也是在这一步完成的。并且让插件监听 webpack 构建生命周期的事件节点，以做出对应的反应。
编译
- 创建 chunk chunk 是 webpack 在内部构建时候的概念，译为块,它是 webpack 通过某个入口文件找到的所有依赖的统称。
```
// webpack.config.js
module.exports = {
  // 入口文件
  entry: "./src/index.js",
  // ...
};
```
  上面的webpack.config.js使用commomJS来进行模块化，导出一个对象，对象当中就是我们所自定义的 wenpack 配置，而entry属性表示我们设定的项目的入口文件。
  
  webpack 根据我们的入口文件进行项目的构建，会将构建的项目打包成一个chunk，也就是main chunk。
  
  每个chunk都有至少两个属性： name：默认的为 main id：唯一的编号，开发环境和name相同，但是生产环境下面是一个数字，从 0 开始。
- 构建所有的依赖模块
  
  首先从入口文件开始打包，检查记录当中是否已经有转换后的模块代码，如果已经记录了，则直接使用保存的模块代码文件，如果没有，则开始读取文件的内容，判断模块的类型，使用对应的loaders进行处理，处理完成之后，将代码转成AST抽象语法树,并且将依赖关系保存到dependencies当中，然后替换依赖函数，最后将转换好的模块代码保存到记录当中，接下来开始打包dependencies当中记录的依赖，根据dependencies的记录递归加载依赖模块。
- 产生 chunk assets 通过入口文件构建完成所以的模块之后，chunk 当中会产生模块列表，列表中包含了模块 ID 和转换后的模块代码。而接下来，webpack 会根据配置为 chunk 生成一个资源列表，就是chunk assets,资源列表可以理解为是生成到最终文件的文件名和文件内容。
  
  转换前
  
  模块 ID 转换后的代码
  ./src/index.js xxxxxx
  ./src/app.js xxxxx
  
  转换后
  
  文件名文件内容
  ./dist/main.js xxxxxx
  ./dist/main.map.js xxxxx
  chunk hash xxxxxxxx
  
  chunk hash 是根据所有的 chunk assets 的内容生成的一个 hash 字符串。
- 合并 chunk assets 将多个 chunk assets 合并到一起，然后产生一个总的 chunk assets。
输出当所有的模块都合并成一个总的chunk assets的时候，webpack 会利用 node 的fs模块(文件处理模块),根据编译产生的总的 assets，生成对应的文件。

文件名	文件内容
./dist/main.js	xxxxxx
./dist/main.map.js	xxxxx
chunk hash xxxxxxxx

模块 ID	转换后的代码
./src/index.js	xxxxxx
./src/app.js	xxxxx