让我们看一下WebPack的官方定义：
本质上，WebPack是现代JavaScript应用程序的现代模块捆绑器。当WebPack处理应用程序时，它递归地构建了依赖图（依赖关系图），其中包含应用程序所需的每个模块，然后将所有这些模块包装到一个或多个模块中捆。
我相信这个定义已经很清楚。首先，它的本质是一个模块包装器，其工作是将每个模块打包到相应的捆绑包中。那么您在中间做什么？
现在有以下文件
请写一个bundler.js，将ES6代码转换为ES5代码，然后打包这些文件以生成可以在浏览器中正确运行的代码。
我们将需求分为以下三个步骤
要转换代码，您需要使用@bebel/parser生成AST抽象语法树，然后使用@babel/traverse执行AST遍历，记录依赖关系，最后使用@babel/core和@babel/preset/preset-en。
一方面，依赖数组被遍历，另一方面，根据初始入口的依赖性，分析了更深的依赖项，第一步的功能是生成依赖项，并将其添加到依次依赖数组。
为了显示它们之间的关系，我们使用MAP存储它来生成最终的依赖图。
当我们在控制台中获取最终代码字符串时，我们可以输出Say Hello的文本，
本文不太深入的是评估（代码）。这是代码的执行。此代码将将相应的变量挂载到导出对象。
原始：https：//juejin.cn/post/7098326031911616520