聊一聊bundle为啥会被设计成如此格式

刚开始接触bundle内容的时候一直有如下一个问题：

bundle不就是js文件的集合体么，为什么不是直接将压缩好的js内容复制过来，而是设计成如此格式呢

让我很诧异的是在网上竟然没有找到相关的资料，起初以为很多人没有意识到这个问题，搞明白以后才发现原来是这个是前端比较基础的内容，应该是很多人不屑于谈这个，泪目呀

要搞明白这个问题，首先我们要知道前端常用的export/module/require等是属于CommonJS规范，而CommonJS规范起源于Node，本身是不支持浏览器的，之所以我们用着没问题，是因为Webpack在bundle文件中帮我们实现了Commonjs规范，可能有朋友会问，我在调试中并没有加载bundle呀，那为啥调试没问题呢，这是因为调试过程中使用的是没有写入文件的bundle，其实跟在生产环境使用的内容是一致的

如上所说，bundle被设计成如此格式，主要就是为了实现CommonJS规范，建议大家在分析bundle的时候(webpack 打包后文件分析)，优先要搞明白里面是如何实现CoomonJS的如下两个功能，这两个问题搞懂了，你基本就明白bundle是个啥情况了

1. 实现模块化开发，提高代码复用率
2. 实现封装作用域，避免命名冲突

格式的原因分析完后，脑袋里又有如下一个问题：

bundle为啥要是自执行函数呢

这个问题就比较简单了，在webpack是支持同时打出多个bundle的，浏览器也会同时加载多个bundle，使用自执行函数就是为了区分两个bundle的作用域，避免两个bundle的变量在互相污染