最近原创文章回顾：
Webpack 是前端很火的打包工具，它本质上是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有模块打包成一个或多个 bundle。
其实就是：Webpack 是一个 JS 代码打包器。
至于图片、CSS、Less、TS等其他文件，就需要 Webpack 配合 loader 或者 plugin 功能来实现~
一、Webpack 构建流程分析
1. Webpack 构建过程
首先先简单了解下 Webpack 构建过程：
- 根据配置，识别入口文件；
- 逐层识别模块依赖（包括 Commonjs、AMD、或 ES6 的 import 等，都会被识别和分析）；
- Webpack 主要工作内容就是分析代码，转换代码，编译代码，最后输出代码；
- 输出最后打包后的代码。
2. Webpack 构建原理
看完上面的构建流程的简单介绍，相信你已经简单了解了这个过程，那么接下来开始详细介绍 Webpack 构建原理，包括从启动构建到输出结果一系列过程：
（1）初始化参数
解析 Webpack 配置参数，合并 Shell 传入和 webpack.config.js 文件配置的参数，形成最后的配置结果。
（2）开始编译
上一步得到的参数初始化 compiler 对象，注册所有配置的插件，插件监听 Webpack 构建生命周期的事件节点，做出相应的反应，执行对象的 run 方法开始执行编译。
（3）确定入口
从配置文件（ webpack.config.js ）中指定的 entry 入口，开始解析文件构建 AST 语法树，找出依赖，递归下去。
（4）编译模块
递归中根据文件类型和 loader 配置，调用所有配置的 loader 对文件进行转换，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
（5）完成模块编译并输出
递归完后，得到每个文件结果，包含每个模块以及他们之间的依赖关系，根据 entry 配置生成代码块 chunk 。
（6）输出完成
输出所有的 chunk 到文件系统。
注意：在构建生命周期中有一系列插件在做合适的时机做合适事情，比如 UglifyPlugin 会在 loader 转换递归完对结果使用 UglifyJs 压缩覆盖之前的结果。
二、手写 Webpack 构建工具
到这里，相信大家对 Webpack 构建流程已经有所了解，但是这还不够，我们再来试着手写 Webpack 构建工具，来将上面文字介绍的内容，应用于实际代码，那么开始吧~
1. 初始化项目
在手写构建工具前，我们先初始化一个项目：
$ yarn init -y
并安装下面四个依赖包：
@babel/parser: 用于分析通过fs.readFileSync读取的文件内容，并返回 AST (抽象语法树) ；@babel/traverse: 用于遍历 AST, 获取必要的数据；@babel/core: babel 核心模块，提供transformFromAst方法，用于将 AST 转化为浏览器可运行的代码；@babel/preset-env: 将转换后代码转化成 ES5 代码；
$ yarn add @babel/parser @babel/traverse @babel/core @babel/preset-env
初始化项目目录及文件：
代码存放在仓库：github.com/pingan8787/…
由于本部分核心内容是实现 Webpack 构建工具，所以会从《2. Webpack 构建原理》的“（3）确定入口”步骤开始下面介绍。
大致代码实现流程如下：
从图中可以看出，手写 Webpack 的核心是实现以下三个方法：
createAssets: 收集和处理文件的代码；createGraph：根据入口文件，返回所有文件依赖图；bundle: 根据依赖图整个代码并输出；
2. 实现 createAssets 函数
2.1 读取通过入口文件，并转为 AST
首先在 ./src/index 文件中写点简单代码：
// src/index.js import info from "./info.js"; console.log(info);
实现 createAssets 方法中的 文件读取 和 AST转换 操作：
// leo_webpack.js const fs = require("fs"); const path = require("path"); const parser = require("@babel/parser"); const traverse = require("@babel/traverse").default; // 由于 traverse 采用的 ES Module 导出，我们通过 requier 引入的话就加个 .default const babel = require("@babel/core"); let moduleId = 0; const createAssets = filename => { const content = fs.readFileSync(filename, "utf-8"); // 根据文件名，同步读取文件流 // 将读取文件流 buffer 转换为 AST const ast = parser.parse(content, { sourceType: "module" // 指定源码类型 }) console.log(ast); } createAssets('./src/index.js');
上面代码： 通过 fs.readFileSync() 方法，以同步方式读取指定路径下的文件流，并通过 parser 依赖包提供的 parse() 方法，将读取到的文件流 buffer 转换为浏览器可以认识的代码（AST），AST 输出如下：
另外需要注意，这里我们声明了一个 moduleId 变量，来区分当前操作的模块。 在这里，不仅将读取到的文件流 buffer 转换为 AST 的同时，也将 ES6 代码转换为 ES5 代码了。
2.2 收集每个模块的依赖
接下来声明 dependencies 变量来保存收集到的文件依赖路径，通过 traverse（） 方法遍历 ast，获取每个节点依赖路径，并 push 进 dependencies 数组中。
// leo_webpack.js function createAssets(filename){ // ... const dependencies = []; // 用于收集文件依赖的路径 // 通过 traverse 提供的操作 AST 的方法，获取每个节点的依赖路径 traverse(ast, { ImportDeclaration: ({node}) => { dependencies.push(node.source.value); } }); }
2.3 将 AST 转换为浏览器可运行代码
在收集依赖的同时，我们可以将 AST 代码转换为浏览器可运行代码，这就需要使用到 babel ，这个万能的小家伙，为我们提供了非常好用的 transformFromAstSync() 方法，同步的将 AST 转换为浏览器可运行代码：
// leo_webpack.js function createAssets(filename){ // ... const { code } = babel.transformFromAstSync(ast,null, { presets: ["@babel/preset-env"] }); let id = moduleId++; // 设置当前处理的模块ID return { id, filename, code, dependencies } }
到这一步，我们在执行 node leo_webpack.js ，输出如下内容，包含了入口文件的路径 filename 、浏览器可执行代码 code 和文件依赖的路径 dependencies 数组：
$ node leo_webpack.js { filename: './src/index.js', code: '"use strict";\n\nvar _info = _interopRequireDefault(require("./info.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(_info["default"]);', dependencies: [ './info.js' ] }
2.4 代码小结
// leo_webpack.js const fs = require("fs"); const path = require("path"); const parser = require("@babel/parser"); const traverse = require("@babel/traverse").default; // 由于 traverse 采用的 ES Module 导出，我们通过 requier 引入的话就加个 .default const babel = require("@babel/core"); let moduleId = 0; function createAssets(filename){ const content = fs.readFileSync(filename, "utf-8"); // 根据文件名，同步读取文件流 // 将读取文件流 buffer 转换为 AST const ast = parser.parse(content, { sourceType: "module" // 指定源码类型 }) const dependencies = []; // 用于收集文件依赖的路径 // 通过 traverse 提供的操作 AST 的方法，获取每个节点的依赖路径 traverse(ast, { ImportDeclaration: ({node}) => { dependencies.push(node.source.value); } }); // 通过 AST 将 ES6 代码转换成 ES5 代码 const { code } = babel.transformFromAstSync(ast,null, { presets: ["@babel/preset-env"] }); let id = moduleId++; // 设置当前处理的模块ID return { id, filename, code, dependencies } }
