Webpack 背后做了什么？

在现代前端开发中，我们通常会将代码拆分成多个模块，按功能组织文件，使用 ES6+的import/export语法进行依赖管理。同时，项目中还可能包含 TypeScript、JSX、CSS 模块等浏览器无法直接识别的资源。然而，浏览器并不原生支持这种模块化开发方式，尤其是在旧版本浏览器中，模块加载和高级语法都无法直接运行。

因此，我们需要一个工具，能够将这些分散的、现代化的代码预先处理、转换并合并成少数几个浏览器可以理解的 JavaScript 文件。这个过程就是"打包"（bundling）。

本文将带你一步步分析并实现一个简易 JavaScript 模块打包器（Bundler），通过使用 @babel/parser、@babel/traverse 和 @babel/core 等工具，完成以下流程：

1. 读取入口文件内容
2. 解析代码生成 AST（抽象语法树）
3. 遍历 AST 分析模块依赖关系
4. 将 ES6+ 代码转换为低版本 JavaScript（兼容性处理）
5. 递归收集所有依赖模块信息，构建依赖图谱
6. 生成可执行的 IIFE（立即执行函数）打包代码
7. 输出最终打包结果

一、项目背景与目标

我们要做什么？

我们希望实现一个函数 bundle('./src/index.js')，它能：

• 以 index.js 为入口文件；
• 分析其中所有的 import 语句；
• 递归查找所有依赖模块；
• 将每个模块的代码转换为 ES5 兼容语法；
• 最终生成一段可以在浏览器中直接运行的 JavaScript 代码；
• 并将这段代码输出到项目根目录。

这个过程，正是 Webpack 等打包工具的核心逻辑。

---

二、准备工作：依赖安装

为了实现上述功能，我们需要引入几个关键的 Babel 工具包：

npm install @babel/parser      # 将 JavaScript 代码解析成 AST
npm install @babel/traverse    # 遍历和修改 AST
npm install @babel/core       # 核心编译器，用于代码转换
npm install @babel/preset-env # 将 ES6+ 转换为低版本 JS

此外，我们还会用到 Node.js 内置模块：

• fs：读取文件内容
• path：处理路径

---

三、核心函数详解

1. getModuleInfo(filename)：获取单个模块的信息

这是整个打包流程的第一步。该函数接收一个文件路径，返回该模块的详细信息：文件路径、依赖列表、转换后的代码。

const getModuleInfo = (filename) => {
  const content = fs.readFileSync(filename, 'utf-8');
  const ast = parser.parse(content, {
    sourceType: 'module'  // 表示这是一个 ES Module
  });
  
  const deps = {}; // 存储该模块的依赖关系

  traverse(ast, {
    ImportDeclaration({ node }) {
      const modulePath = path.resolve(path.dirname(filename), node.source.value);
      deps[node.source.value] = modulePath;
    }
  });

  const { code } = babel.transformFromAst(ast, null, {
    presets: ['@babel/preset-env']
  });

  return {
    file: filename,
    deps: deps,
    code: code
  };
};

详细解析：

1. fs.readFileSync(filename, 'utf-8')

   同步读取指定文件的源码内容，作为字符串返回。

2. parser.parse(content, { sourceType: 'module' })

   使用 @babel/parser 将源码字符串解析成 AST（抽象语法树）。

   AST 是代码的树状结构表示，便于程序分析和操作。例如：

   import msg from './msg.js';

   会被解析成包含 type: "ImportDeclaration" 的节点。

3. traverse(ast, { ImportDeclaration(...) })

   使用 @babel/traverse 遍历 AST，寻找所有 import 声明。

   • node.source.value 是导入的模块路径（如 './msg.js'）；
   • 使用 path.resolve() 将相对路径转为绝对路径，避免后续查找出错；
   • 将映射关系存入 deps对象：{ './msg.js': '/project/src/msg.js' }

4. babel.transformFromAst(ast, null, { presets: ['@babel/preset-env'] })

   使用 Babel 将 AST 转换为低版本 JavaScript代码（如 ES5），确保兼容老浏览器。

   输出的是标准 JS 字符串，不再包含 import/export 语法。

5. 返回模块信息对象

   包含文件路径、依赖映射、转译后代码，供后续打包使用。

---

2. parseModules(file)：构建完整的依赖图谱

这一步是打包器的核心------递归分析所有依赖，构建依赖图（Dependency Graph）。

const parseModules = (file) => {
  const entry = getModuleInfo(file);
  const temp = [entry];
  
  // 广度优先遍历所有依赖
  for (let i = 0; i < temp.length; i++) {
    const deps = temp[i].deps;
    for (const key in deps) {
      if (deps.hasOwnProperty(key)) {
        temp.push(getModuleInfo(deps[key]));
      }
    }
  }

  // 构建成图结构
  const depsGraph = {};
  temp.forEach(moduleInfo => {
    depsGraph[moduleInfo.file] = {
      deps: moduleInfo.deps,
      code: moduleInfo.code
    };
  });

  return depsGraph;
};

详细解析：

1. 从入口文件开始

   调用 getModuleInfo(file) 获取主模块信息，并放入 temp 数组。

2. 广度优先遍历（BFS）所有依赖

   使用 for 循环遍历 temp，每遇到一个模块，就检查它的 deps，把每个依赖也调用 getModuleInfo 加入 temp。

   这样就能递归地把整个依赖树"展开"成一个扁平数组。

3. 构建依赖图 depsGraph

   将所有模块信息组织成一个对象，以文件路径为键，值为 {deps, code}。

   示例结构如下：

   {
     "/project/src/index.js": {
       deps: { "./msg.js": "/project/src/msg.js" },
       code: "var msg = ...;"
     },
     "/project/src/msg.js": {
       deps: {},
       code: "var msg = 'Hello'; exports.default = msg;"
     }
   }

这个 depsGraph 就是 Webpack 所说的"依赖图谱"，它是后续打包执行的基础。

---

3. bundle(file)：生成最终可执行的打包代码

最后一步，我们要把所有模块和它们之间的依赖关系组合成一个可以直接在浏览器中运行的文件。

思路是：把所有模块的代码都塞进一个大的函数里，通过一个 require 函数来控制每个模块的加载和执行顺序，确保依赖被正确引用。我们用一个立即执行函数（IIFE）来包裹整个代码，避免污染全局环境。

最终生成的代码结构大致如下：

const bundle = (file) => {
  const depsGraph = JSON.stringify(parseModules(file));
  return `(function(graph){
    function require(file){
      function absRequire(relPath){
        return require(graph[file].deps[relPath]);
      }
      var exports = {};
      (function(absRequire, exports, code){
        eval(code);
      })(absRequire, exports, graph[file].code);
      return exports;
    }
    require(${JSON.stringify(file)});
  })(${depsGraph});`;
}

详细解析：

1. JSON.stringify(parseModules(file))

   将依赖图对象序列化为字符串，以便插入到生成的代码中。

2. 返回一个 IIFE（立即执行函数）

   (function(graph){ ... })(depsGraph)

   • 定义一个函数，接收 graph（即依赖图）；
   • 立即传入 depsGraph 执行；
   • 实现了作用域隔离，避免污染全局。

3. require(file) 函数：模拟模块加载机制

   • absRequire(relPath)：根据相对路径查找绝对路径并递归加载；
   • exports：模拟 CommonJS 的 exports 对象，用于收集模块导出；
   • eval(code)：动态执行模块代码（此时代码已转为 ES5，无 import/export）；
   • 返回 exports，模拟 module.exports。

4. 启动入口模块

   require(${JSON.stringify(file)})

   使用 JSON.stringify 安全地插入入口文件路径，开始执行整个应用。

5. 整体结构就是一个自包含的 JS 包

   输出的是一段完整的 JavaScript 字符串，可以直接写入文件或在浏览器中运行。

---

四、完整流程图解

[入口文件 index.js]
        ↓
   readFileSync → 读取源码
        ↓
   @babel/parser → 生成 AST
        ↓
   @babel/traverse → 提取 import 依赖
        ↓
   @babel/core → 转换为 ES5 代码
        ↓
   getModuleInfo() → 得到单个模块信息
        ↓
   parseModules() → 递归分析所有依赖，构建 depsGraph
        ↓
   bundle() → 生成 IIFE 打包代码
        ↓
   输出到文件或执行

---

五、运行示例

假设项目结构如下：

/project
  ├── src/
  │   ├── index.js
  │   └── msg.js
  └── bundle.js

src/index.js：

import msg from './msg.js';
console.log(msg);

src/msg.js：

export default 'Hello from msg!';

调用：

const bundledCode = bundle('./src/index.js');
fs.writeFileSync('./output.js', bundledCode);

生成的 output.js 内容大致如下：

(function(graph){
  function require(file){
    function absRequire(relPath){
      return require(graph[file].deps[relPath]);
    }
    var exports = {};
    (function(absRequire, exports, code){
      eval(code);
    })(absRequire, exports, graph[file].code);
    return exports;
  }
  require("/project/src/index.js");
})({
  "/project/src/index.js": {
    deps: { "./msg.js": "/project/src/msg.js" },
    code: "var msg = absRequire('./msg.js'); console.log(msg);"
  },
  "/project/src/msg.js": {
    deps: {},
    code: "var msg = 'Hello from msg!'; exports.default = msg;"
  }
});

这段代码可以在浏览器中直接运行，输出 Hello from msg!。