webpack源码简版

1. Compiler.js:负责整个编译过程的控制和管理，包含compiler构造函数，在构造函数中获取webpack.config.js的出口、入口、参数等
2. Bundler.js:引入webpack.config.js和compiler.js，创建compiler实例化对象并传入options。
3. 拿到webpack配置参数后开始根据入口文件解析文件内容（fs.readFileSync读取文件内容）
   (1). @babel/parser:将文件内容的的源代码解析成AST语法树，AST语法树的节点包含了文件依赖的文件名称。(type,start,end,…)
   (2). @babel/traverse:提取依赖的文件名称到一个数组中
   (3). @babel/core：通过babel.transformFromAst方法将ast转换成浏览器可执行的代码；返回一个对象{文件名，依赖数组，可执行代码}，作为依赖图的一个节点
   (4). 遍历入口文件的依赖数组，数组中是文件名，递归执行上述方法直到找到所有的依赖，然后返回依赖对象。
4. Bundler.js使用compiler对象的run方法生成依赖对象，并通过bundle方法解析graph（依赖图对象），使用eval方法来调用code并输出分发代码
5. Bundler.js使用fs.writeFileSync将分发代码输出到文件中，生成bundle。

complier.js

// 文件操作模块，读取文件内容
const fs = require("fs");
const path = require("path");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const babel = require("@babel/core");
module.exports = class Complier {
   
  constructor(options) {
   
    const {
    entry, output } = options;
    this.entry = entry;
    this.