如今Webpack已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。
你是否好奇你写的代码经过Webpack构建之后会生成什么东西？是否有时调试遇到莫名其妙的问题？
本文不讲如何进行配置，只是基于几个基础的例子，简要分析一下 webpack@4.20.2 构建后的代码结构，当然了，并不全面，时间问题能力问题还不能理解到位。
代码比较长，生成的代码也比较晦涩比较绕，也可能条理不顺，客官坐好咧~
一、Webpack的运行机制
Webpack的运行过程实际上可以归纳为这个步骤
读取配置参数 -> 相关事件绑定（插件参与） -> 识别各入口Entry模块 -> 编译文件（loader参与）-> 生成文件
首先读取我们的配置文件如 webpack.config.js，然后事件流就参与进来绑定相关的事件，Webpack中的事件使用 Tapable 来管理，在这一阶段，除了绑定webpack内置的一大堆事件之外，还支持自定义的一些事件处理。
配置中的 plugins部分，实际上也可以看作是一些自定义的事件处理，因为插件将在定义的”相关时刻“插入到编译过程中处理资源，这里的”相关时刻“指的就是 订阅-发布 模式中的发布环节
webpack支持多个入口模块，所以还需要进行各入口模块的分析（这里的入口模块只能为JS模块），比如以下两个入口模块
分析完入口模块，接下来分析该模块的依赖，并使用相关loader进行编译（如果需要loader的话），真正的编译环节是在这里。
期间会使用AST抽象语法树来分析语法，直到编译完成，输出到相应的文件中
可以来看看这篇文章 Webpack运行机制
二、Webpack编译结果
由最简单的例子开始
2.1 无依赖的单个模块./main.js
console.log('main');