webpack - babel配置
babel是一个javascript编译器，是前端开发中的一个利器。它突破了浏览器实现es标准的限制，使我们在开发中可以使用最新的javascript语法。
通过构建和babel，可以使用最新js语法进行开发，最后自动编译成用于浏览器或node环境的代码。
webpack中使用babel
配合webpack使用babel前，需要首先使用npm init初始化一个项目，npm install -g webpack安装webpack（全局安装是为了在命令行使用webpack命令）。
安装babel-loader, babel-core, babel-preset-env。
npm install --save-dev babel-loader babel-core babel-preset-env
其中，babel-preset-env插件是为了告诉babel只编译批准的内容，相当于babel-preset-es2015, es2016, es2017及最新版本。通过它可以使用最新的js语法。
配置webpack.config.js
在webpack配置文件中配置bable-loader
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: [
['env',{
targets: {
browsers: ['> 1%', 'last 2 versions']
}
}]
]
}
},
exclude: '/node_modules/'
}
]
}
其中，exclude是定义不希望babel处理的文件。targets是presets的一些预设选项，这里表示将js用于浏览器，只确保占比大于1%的浏览器的特性，主流浏览器的最新两个主版本。
更多与配置有关的信息，可以参考：
babel env preset设置,
browserlist预设置.
在命令行中运行相应webpack命令即可。
由于babel-preset配置选项较多，我们一般可以在根目录下建立.babelrc文件，专门用来放置babel preset配置，这是一个json文件。可以将上述配置修改如下：
//.bablerc文件
{
"presets": [
['env',{
"targets": {
"browsers": ['> 1%', 'last 2 versions']
}
}]
]
}
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: '/node_modules/'
}
]
}
babel-polifill插件
在上面的babel配置中，babel只是将一些es6，es7-8的语法转换成符合目标的js代码，但是如果我们使用一些特性或方法，比如Generator, Set, 或者一些方法。babel并不能转换为低版本浏览器识别的代码。这时就需要babel-polifill。
简单的说，polifill就是一个垫片，提供了一些低版本es标准对高级特性的实现。使用polifill的方法如下：
npm install --save babel-polifill
然后在应用入口引入polifill，要确保它在任何其他代码/依赖声明前被调用。
//CommonJS module
require('babel-polyfill');
//es module
import 'babel-polifill';
在webpack.config.js中，将babel-polifill加入entry数组中：
entry: ["babel-polifill", "./app.js"]
相比于runtime-transform，polifill用于应用开发中。会添加相应变量到全局，所以会污染全局变量。
runtime-transform插件
runtime transform也是一个插件，它与polifill有些类似，但它不污染全局变量，所以经常用于框架开发。安装：
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
注意安装的环境babel-runtime需要生产环境
用法：
将下面内容添加到.bablerc文件中
{
"plugins": ["transform-runtime"]
}
本文借鉴自：https://blog.csdn.net/hdchangchang/article/details/83022337