babel-loader配置_个人使用（仅供参考）
Babel-loader介绍
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。
安装
npm i babel-loader -D
package.json 配置文件
"babel-core": "^6.26.0", // 核心包
"babel-loader": "^7.1.2", // 基础包
"babel-preset-env": "^1.6.1", // 根据配置转换成浏览器支持的 es5
"babel-plugin-transform-runtime": "^6.23.0", //promise的转换
"babel-preset-react": "^6.24.1", //react语法的转换
"babel-plugin-import": "^1.6.3", // import的转换
"babel-preset-stage-0": "^6.24.1", //babel-preset-stage-0 打包处于 strawman 阶段的语法）接下来 我详细解释一下这些配置的作用：
babel-loader的配置
- .babelrc
在我们告诉 Babel 该做什么之前，你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：
{
"presets": [],
"plugins": []
}babel-preset-env
如果使用babel-preset-es2015,es2016,es2017包含了过多在某些情况下不需要的功能.
但使用babel-preset-env, 我们可以声明环境, 然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。安装babel-preset-env
npm i babel-preset-env
添加配置
{ "presets": ["env"] }指定所要支持的浏览器
指定支持主流浏览器最新的两个版本以及IE 7+:
"presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "ie >= 7"] } } ] ]支持超过市场份额5%的浏览器:
"targets": { "browsers": "> 5%" }某个固定版本的浏览器:
"targets": { "chrome": 56 }
更多配置参考官方文档：
babel-preset-stage-x
官方预设(preset), 有两种，一个是按年份(babel-preset-2017)，一个是按阶段(babel-preset-stage-0)。 这主要是根据TC39 委员会ECMASCRPIT 发布流程来制定的。TC39 委员会决定，从2016年开始，每年都会发布一个版本，它包括每年期限内完成的所有功能，同时ECMAScript的版本号也按年份编制，就有了ES2016, ES2017。所以也就有了babel-present-2016, babel-preset-2017， 对每一年新增的语法进行转化。babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。最终在阶段 4 被标准正式采纳。
以下是4 个不同阶段的（打包的）预设：babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3
注意 stage-4 预设是不存在的因为它就是上面的 es2017 预设。
以上每种预设都依赖于紧随的后期阶段预设，数字越小，阶段越靠后，存在依赖关系。也就是说stage-0是包括stage-1的，以此类推。也就是说这些stage包含的特性是比latest更新的特性但还未被写入标准进行发布。
使用的时候只需要安装你想要的阶段就可以了：
$ npm install --save-dev babel-preset-stage-2
然后添加进你的 .babelrc 配置文件。但是要注意如果没有提供es2017相关的预设，preset-stage-X 这种阶段性的预设也不能用。
- babel-runtime
babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。 （比如：上述的帮助函数_defineProperty有可能在很多的代码模块文件中都会被插入）
Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数，上述的代码就会变成这样
与 babel-polyfill 一样，babel-runtime 的作用也是模拟 ES2015 环境。只不过，babel-polyfill 是针对全局环境的，引入它，我们的浏览器就好像具备了规范里定义的完整的特性 – 虽然原生并未实现。
babel-runtime 更像是分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如 require(‘babel-runtime/core-js/promise’) ，它们不会在全局环境添加未实现的方法，只是，这样手动引用每个 polyfill 会非常低效。我们借助 Runtime transform 插件来自动化处理这一切。
通过安装 babel-plugin-transform-runtime 和 babel-runtime 来开始。
```
$ npm install --save-dev babel-plugin-transform-runtime
$ npm install --save babel-runtime
```
然后更新 .babelrc：
```
{
"plugins": [
"transform-runtime"
]
}
```webpack 中定义 babel-loader
很少有大型项目仅仅需要 babel，一般都是 babel 配合着 webpack 或 glup 等编译工具一起上的。
为了显出 babel 的能耐，个人配用 babel-runtime 、支持 react 的webpack.config.js
先来配使用 babel-runtime 的：
首先安装：
npm install babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime babel-plugin-react-transform webpack --save-dev
npm install babel-runtime --save
然后配置:
module: {
loaders: [{
loader: 'babel',
test: /\.jsx?$/,
include: path.join(__dirname, 'src'),
query: {
plugins: ['transform-runtime'],
presets: [
["env", {
"targets": {
"chrome": 52
},
"modules": false,
"loose": true
}],
'stage-2',
'react'
],
}
}]
}babel-cli
abel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。
让我们先全局安装它来学习基础知识。
$ npm install --global babel-cli
我们可以这样来编译我们的第一个文件：
$ babel my-file.js
这将把编译后的结果直接输出至终端。使用 --out-file 或着 -o 可以将结果写入到指定的文件。
$ babel example.js --out-file compiled.js # 或 $ babel example.js -o compiled.js
如果我们想要把一个目录整个编译成一个新的目录，可以使用 --out-dir 或者 -d。.
$ babel src --out-dir lib # 或 $ babel src -d lib