可以引用官网的一幅图解释，我们可以看到webpack，可以分析各个模块的依赖关系，最终打包成我们常见的静态文件，.js 、 .css 、 .jpg 、.png。今天我们先不弄那么复杂，我们就分析webpack是怎么分析ES6的模块依赖，怎么把ES6的代码转成ES5的。

由于ES6转ES5中需要用到babel，所以要用到一下插件

到使用webpack肯定少不了原文件，我们会涉及三个需要打包的js文件（entry.js、message.js、name.js）

```

entry.js 就是我们的入口文件

bundler.js 是我们简易版的webpack

目录结构

webpack分析依赖是从一个入口文件开始分析的，当我们把一个入口的文件路径传入，webpack就会通过这个文件的路径读取文件的信息（读取到的本质其实是字符串），然后把读取到的信息转成AST（抽象语法树），简单点来说呢，就是把一个js文件里面的内容存到某种数据结构里，里面包括了各种信息，**其中就有当前模块依赖了哪些模块**。我们暂时把通过传**文件路径**能返回文件信息的这个函数叫 `createAsset` 。

第一步我们肯定需要先从 entry.js 开始分析，于是就有了如下的代码，我们先不关心createAsset具体代码是怎么实现的，具体代码我会放在最后。

当执行这句代码，`createAsset` 会返回下面的数据结构，这里包括了模块的id，文件路径，依赖数组（entry.js依赖了message.js，所以会返回依赖的文件名），code（这个就是entry.js ES6转ES5的代码）

好通过 `createAsset` 我们成功拿到了entry.js的依赖，就是 `dependencies` 数组。

我们通过上面可以拿到entry.js依赖的模块，于是我们就可以接着去遍历`dependencies` 数组，循环调用`createAsset`这样就可以得到全部模块相互依赖的信息。得到全部依赖信息需要调用 `createGraph` 这个一个函数，它会进行广度遍历，最终返回下面的数据

我们可以看到返回的是一个数据，字段之前都有和大家解析过，除了 `mapping`，`mapping`这个字段是把当前模块依赖的**文件名称** 和 模块的id 做一个映射，目的是为了更方便查找模块。

我们现在已经能拿到每个模块之前的依赖关系，我们再通过调用`bundle`函数，我们就能构造出最后的`bundle.js`，输出如下图

(function (modules) {

// 创建一个require()函数: 它接受一个 模块ID 并在我们之前构建的模块对象查找它.

function require(id) {

const [fn, mapping] = modules[id];

function localRequire(relativePath) {

// 根据mapping的路径，找到对应的模块id

return require(mapping[relativePath]);

}

const module = { exports: {} };

// 执行每个模块的代码。

fn(localRequire, module, module.exports);

return module.exports;

}

// 执行入口文件，

require(0);

0: [

function (require, module, exports) {

"use strict";

var _message = _interopRequireDefault(require("./message.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

console.log(_message.default);

},

{ "./message.js": 1 },

], 1: [

function (require, module, exports) {

"use strict";

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.default = void 0;

var _name = require("./name.js");

var _default = "hello ".concat(_name.name, "!");

exports.default = _default;

},

{ "./name.js": 2 },

], 2: [

function (require, module, exports) {

"use strict";

Object.defineProperty(exports, "__esModule", {

value: true

});

exports.name = void 0;

var name = 'world';

exports.name = name;

},

{},

],

const fs = require("fs");

const path = require("path");

const babylon = require("@babel/parser");

const traverse = require("@babel/traverse").default;

const babel = require("@babel/core");

let ID = 0;

function createAsset(filename) {

//获取文件，返回值是字符串

const content = fs.readFileSync(filename, "utf-8");

// 讲字符串为ast（抽象语法树， 这个是编译原理的知识，说得简单一点就是，可以把js文件里的代码抽象成一个对象，代码的信息会存在对象中）

//babylon 这个工具是是负责解析字符串并生产ast。

const ast = babylon.parse(content, {

sourceType: "module"

});

//用来存储 文件所依赖的模块，简单来说就是，当前js文件 import 了哪些文件，都会保存在这个数组里

const dependencies = [];

// 遍历当前抽象语法树

traverse(ast, {

// 每当遍历到import语法的时候

ImportDeclaration: ({ node }) => {

// 把当前依赖的模块加入到数组中，其实这存的是字符串，

//例如 如果当前js文件 有一句 import message from './message.js'，

//'./message.js' === node.source.value

dependencies.push(node.source.value);

}

});

//模块的id 从0开始， 相当一个js文件 可以看成一个模块

const id = ID++;

// 这边主要把ES6 的代码转成 ES5

const { code } = babel.transformFromAstSync(ast, null, {

presets: ["@babel/preset-env"]

});

return {

id,

filename,

dependencies,

code

};

function createGraph(entry) {

const mainAsset = createAsset(entry);

// 定义一个保存依赖项的数组

const queue = [mainAsset];

for (const asset of queue) {

const dirname = path.dirname(asset.filename);

// 定义一个保存子依赖项的属性

asset.mapping = {};

asset.dependencies.forEach(relativePath => {

const absolutePath = path.join(dirname, relativePath);

// 获得子依赖（子模块）的依赖项、代码、模块id，文件名

const child = createAsset(absolutePath);

// 给子依赖项赋值，

asset.mapping[relativePath] = child.id;

// 将子依赖也加入队列中，广度遍历

queue.push(child);

});

}

return queue;

function bundle(graph) {

let modules = "";

// 把每个模块中的代码放在一个function作用域内

graph.forEach(mod => {

modules += `${mod.id}:[

});

// require, module, exports 是 cjs的标准不能再浏览器中直接使用，所以模拟了模块加载，执行，导出操作。

const result = `

return result;

const graph = createGraph("./example/entry.js");

const result = bundle(graph);

fs.writeFileSync("./bundle.js", result);

import message from './message.js';

import {name} from './name.js';

export default `hello ${name}!`;

export const name = 'world';