前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
5.1、babel-loader
这个用于将使用ES6规范的js代码，转为ES5。
首先安装一大堆东西，参照下面的命令，一共是4个（包括webpack）
npm install --save babel-loader babel-core babel-preset-env webpack创建babel规则文件.babelrc，内容设置为：
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
}
]
]
}
然后app.js里添加文件内容（这显然是es6语法）：
let foo = () => {
console.log('1')
}
foo()运行 npm run test 执行脚本，等脚本执行完毕后，查看dist文件夹下的 dist.js 文件。
会发现代码已经被成功转为非es6语法了（截取如下）：
var foo = function foo() {
console.log('1');
};
foo();但是，这个只能转一些普通的es6语法，像例如Promise、Set之类的，他是无法转换的。
如果想要转换这些，我们需要做一些额外的工作。
首先安装插件
npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev然后修改.babelrc文件的内容为：
{
"presets": [
"babel-preset-env"
],
"plugins": [
"transform-runtime"
]
}【注】：
babel-runtime（也就是上面plugins数组中的transform-runtime），解决了辅助代码（即让我们可以使用新特性的代码）被默认添加到每一个需要他的文件的问题（这会导致文件过大）。
具体解决方法是禁用了babel对每个文件的runtime注入，引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。
表现效果：假如A模块异步加载B模块，A、B模块里都使用了Set，那么为了使A模块正常运行，引入了某些代码。然后因为B模块又是被A模块引入的，那么B模块在被加载的时候，A模块里已经引入的代码，就没必要再次引入了，所以B模块里是不存在A模块引入的那些兼容代码的。
【注（完）】
修改webpack设置文件的loader内容为：
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}最后修改app.js这个文件的内容，给里面加一些特殊的es6语法：
let foo = () => {
console.log('1')
}
foo()
let bar = new Promise((resolve, reject) => {
resolve(1)
})
bar.then(msg => console.log(msg))
let baz = new Set([1, 2, 3])
console.log(baz)
let another = async function () {
console.time('timeout')
let result = await new Promise((resolve, reject) => {
console.log('in Promise')
setTimeout(() => {
resolve('Promise resolve')
}, 1000)
})
console.log(result)
console.timeEnd('timeEnd')
}
another()以上代码包含es6的Promise，Set，以及es7中的async/await。
此时我们运行一下npm run test试试，然后查看dist/dist.js文件，会发现我们的代码出现在大约1040行的位置，并且原本使用es6、es7语法的代码，都被一段很长很复杂的代码所替换（因为太长，所以这里略过）。
这说明我们转义成功了！
