1.babel-core
当咱们在webpack中应用babel的时候，首先要装置babel-core，这是babel编译库的外围包
npm install babel-core --save-dev2.babel-loader
之后，webpack中对js文件，咱们要进行编译，就须要配置，在webpack中，须要用到babel-loader来应用bebel
npm install babel-loader --save-dev所以，在webpack.config.js代码中，要这样写：
rules: [ { test: /\.js$/, use: { loader: 'babel-loader' }, exclude: '/node_modules/' }]3.babel-preset-xxx(xxx代表很多选项)
（1）babel-preset-es2015
依照es6规范进行编译，同理，如果依照es7规范进行编译，则装置babel-preset-es2016
（2）babel-preset-env
一般来说，如果你想用最新的标准做编译，间接装置babel-preset-env就能够了，它蕴含了 babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017，等价于babel-preset-latest，能够编译所有最新标准中的代码
应用编译规定来配置webpack,在babel-loader中新增配置参数：
rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'] //也能够写成presets: ['babel-preset-env'] }, exclude: '/node_modules/' } }]4.babel-polyfill
babel官网上写了很明确一句话，babel只负责对语法进行编译。当咱们写箭头函数，babel会帮你把它编译成一般函数，这没有任何问题，然而，比如说咱们代码里应用了promise，babel打包进去的代码其实还是promise，在低版本浏览器里，promise并不反对，然而babel并不会帮你解决，因为这不是语法编译层面须要做的事件。不转换新的API包含，比方Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象。
于是，如果咱们要让打包进去的代码能兼容低版本浏览器，还要思考到promise，Set这样的新语法低版本浏览器不兼容的问题，这时候babel-polyfill就出场了。你只须要全局装置一下babel-polyfill：
npm install --save-dev babel-polyfill而后在我的项目中应用一下它，代码就不存在方才提到的兼容性问题了：
import 'babel-polyfill';然而，间接用babel-polyfill会有一些坑，第一个坑是净化全局环境，比如说低版本浏览器没有Set，然而babel-polyfill会在全局变量里加一个Set。再一个问题是，会造成代码冗余，举个例子，多个模块用到Promise，每个模块里都有可能独立存在一个对Promise做兼容性的代码。所以，应用babel-polyfill能够解决兼容性问题，但并不是最佳计划，于是，呈现了babel-plugin-transform-runtime，应用这个插件，就能够解决下面的问题了。
5.babel-plugin-transform-runtime
装置：
npm install babel-plugin-transform-runtime --save-devnpm install babel-runtime --save-dev更改webpack的配置：
rules: [ { test: /\.js$/, use: { loader: 'babel-loader', options: { presets: ['env'], //也能够写成presets: ['babel-preset-env'] plugins: ['transform-runtime'] }, exclude: '/node_modules/' } }]- .babelrc文件
==============
好了，到此为止，整个babel的配置差不多了，最初咱们能够在工程目录下创立一个.babelrc文件，把对于babel的配置放进去：
{ presets: [['babel-preset-env', { targets: { browser: ['> 1%', 'last 2 versions'] } }]], plugins:['transform-runtime']}而后，webpack.config.js能够精简为：
rules: [ { test: /\.js$/, use: { loader: 'babel-loader', }, exclude: '/node_modules/' }]