开始 webpack 前，我们先了解下 Babel：Babel 官网 的第一句话，Babel 是 JavaScript 的一个编译器。
我们知道，ES6 只能兼容高版本浏览器，比如 谷歌，火狐，IE10 以上，如果需要兼容低版本浏览器，就需要用到 babel 来编译。
babel 的方便在于：既可以单独用，也可以和 webpack，gulp 等组合起来使用。
那么，babel 如何使用呢？他的用法有两种：
用法1，在线编译：
通过引入 JS 文件，在客户端来完成一个编译的过程。但这种方法有两个问题：
1，降低了代码的性能。因为在客户端编译会有一个延迟的时间，说白了，就是会卡。
2，babel.js 文件本身也不认低版本 IE。
用法2，离线编译。
关于如何用，我们不急，先来看一段简单的代码，在 谷歌 和 IE 中的运行情况：
可以看到，在高版本浏览器中，ES6 代码运行都是没问题的，那么我们来试试 IE9：
我们可以看到，代码不仅运行不了，还报错了，说缺少一个分号。
其实这根本不是缺少分号的问题，而是 IE9 根本就不认识 let 这个东西。
那么接下来，我们就先用第一个方法，通过引入 JS 文件，也就是 browser.min.js 来解决。（babel 下载下来就是 browser.js）
我们发现，在 IE9 上面运行，结果依然是报错，原因很简单，问题出在 <script></script> 标签上面。
我们平常写的时候，都会有个 type 属性：<script type="text/javascript"></script>。
type 的意思就是说，我这个 script 标签内部，放的是什么类型的代码。
那么我们平时不写为啥也没报错呢？这是因为 type="text/javascript" 是浏览器中默认的类型，所以我们不写也没关系。
但是我们现在引入了 babel ，所以我们就需要改成：type="text/babel"。
可以看到，这时候，代码就不会报错，并且可以执行。那么为什么会这样呢？
首先，在浏览器那边，它看到 script 标签中的 type="text/babel"，浏览器就会想，这个 type，我不认识啊，所以浏览器就跳过了，因为它不能瞎执行。那么 <script type="text/babel"> ... </script> 中间的代码就会被浏览器忽略。
而接下来，browser.js 就会在整个页面里面去找，有没有哪个 script 标签的 type 是带 babel 标志的，如果有，就交给我来处理。
于是，它就找到了 <script type="text/babel"> ... </script>，然后它就会把这里面的代码拿过去做一个编译。
最后，在编译完成之后，再来执行。
那么，虽然问题解决了，但是这种引入 JS 文件的方法并不好。
第一，在线编译会带来一定的延迟。
比如，我们 F5 刷新，就会发现：
我们现在的代码，只是非常简单的三行代码，如果说是300行，3000行代码呢？那页面基本就卡死了，用户也接受不了。
第二，browser.js 本身就不兼容低版本浏览器，这个问题才是最严重的。
可以看到，如果我们更换到 IE 7 版本，browser.js 本身就报错了。
所以，第一种用法 在线编译，受限是非常严重的，也就是给大家认识下，做个 demo 而已。
