webpack 执行流程 — 实现 myWebpack

前言

实现 myWebpack 主要是为了更好的理解，webpack 中的工作流程，一切都是最简单的实现，不包含细节内容和边界处理，涉及到 ast 抽象语法树和编译代码部分，最好可以打印出来观察一下，方便后续的理解。

react 项目中的 webapck

为了更好的了解 Webpack 的执行流程，我们可以先通过观察 react 项目结构中，有关 webpack 的一些内容。当然我们得先拥有一个新的项目，可以通过下面的步骤得到：

• 使用 【create-react-app 项目名称】命令创建项目
• 进入对应的项目目录，运行 npm run eject 命令拉取，react 项目中和 webapck 相关的配置
  相比于正常的 react 项目，会多出来两个文件目录分别是 config 和 scripts

config 目录下主要存放的是 webpack 相关的配置内容：

scripts 目录下主要存放的是在 pakage.json 中存放的 3 个默认 script 脚本相关的内容:

主要看 scripts 目录下的 build.js 文件，这里面引入了 webpack 并且调用 webpack(config) 得到了 compiler 对象，最后使用了 compiler.run(callback) 的方式开始进行打包，代码中具体位置如下：

Webpack 执行流程

通过 react 项目中的目录结构结合以及 webpack 中的 Node 接口相关内容，可得到以下几个阶段：

• 解析配置参数 —— 合并 shell 传入和 webpack.config.js 文件配置参数
• 初始化 Compiler —— 通过 webpack(config) 得到 Compiler 对象，并注册所有配置插件，插件监听 webpack 构建生命周期的事件节点，做出相应处理
• 开始编译 —— 调用 Compiler 对象 run() 方法开始执行编译
• 确定入口 —— 根据配置的 entry 找出所有入口文件，开始解析文件，并构建 AST 语法树，找出依赖模块，进行递归处理
• 编译模块 —— 递归中根据文件类型和 loader 配置，调用所有配置的 loader 对文件进行转换，再找出该模块依赖的模块，再递归本步骤，直到所有入口依赖的文件都经过了本步骤的处理
• 完成模块编译 —— 模块编译结束后，得到每个文件结果，包含每个模块以及他们之间的依赖关系
• 输出资源 —— 根据 entry 或分包配置生成代码块 chunk，再把每个 chunk 转换成一个单独的文件加入到输出列表

  PS：输出资源 这一步是修改输出内容的最后机会

• 输出完成 —— 根据配置确定输出路径和命名，输出所有 chunk 到文件系统

核心流程图示：

实现 myWebpack

准备工作

根据 react 项目中的目录结构，可以得到一个简单 my-webpac 的项目结构：

• config 目录 —— 存放的是 webpack.config.js 相关配置
• script 目录 —— 存放的是 script 脚本需要执行的 js 文件
• lib 目录 —— 存放的就是 myWebpack 库（需要自己实现）
• src 目录 —— 就是 webpack.config.js 中默认的入口文件目录，其中的 index.js 为入口文件，其他的 js 文件均属于要测试打包的 js 模块

在后面的内容中为了更好的实现模块化，目录结构可能会稍微进行修改，最初的文件结构如下：

my-webpack
├─ config
│  └─ webpack.config.js
├─ lib
│  └─ myWebpack
│     └─ index.js
├─ package-lock.json
├─ package.json
├─ script
│  └─ build.js
└─ src
   ├─ add.js
   ├─ desc.js
   └─ index.js

开始实现

简单配置 config 目录下的 webpack.config.js

// config/webpack.config.js

module.exports = {
   
    entry: "./src/index.js",
    output: {
   
        path: 'dist',
        filename: 'index.js'
    }
};

实现 script 目录下的 build.js

这里只需要引入 myWebpack.js 和 webapck.config.js 文件，通过把配置内容 config 传入 myWebpack() 方法，并执行得到 compiler 对象，最终通过 compiler.run() 开始执行打包的处理程序

// script/build.js

const myWebpack  = require('../lib/myWebpack'); // 这里相当于 require('../lib/myWebpack/index.js')
const config  = require('../config/webpack.config.js');

//  获得 compiler 对象
const compiler = myWebpack(config);

// 开始打包
compiler.run();

实现 lib 目录下的 myWebpack 的具体内容（即其目录下的 index.js）