一昙啄、babel的作用：
1穆役、官網(wǎng)解釋 ： Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+（ES6） 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法梳凛，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中耿币。

2、關(guān)于ES6的兼容性：ES6語(yǔ)法不是所有的瀏覽器都支持韧拒、都能運(yùn)行淹接，
Chrome：51 版起便可以支持 97% 的 ES6 新特性十性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性塑悼。
IE：Edge 15可以支持 96% 的 ES6 新特性劲适。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）win10之后的瀏覽器是edge厢蒜。之前的是IE霞势。

所以為了你的項(xiàng)目能夠在所有終端上都能運(yùn)行，最保險(xiǎn)的辦法是將你的ES6語(yǔ)法轉(zhuǎn)換成所有瀏覽器都支持的ES5語(yǔ)法斑鸦，所以愕贡，babel就是用來(lái)干這件事的；

簡(jiǎn)單點(diǎn)說(shuō)巷屿，babel就是將項(xiàng)目中你寫(xiě)的ES6語(yǔ)法固以，比如箭頭函數(shù)、map()等語(yǔ)法特性攒庵，轉(zhuǎn)換成瀏覽器能夠識(shí)別的嘴纺，低級(jí)的JS語(yǔ)法；

二浓冒、babel的使用：
1栽渴、安裝：npm install --save-dev babel-loader @babel/core
（1）babel-loader的作用：babel-loader僅僅是webpack和babel之間溝通的橋梁，并不負(fù)責(zé)將ES6語(yǔ)法轉(zhuǎn)換成低級(jí)的JS語(yǔ)法稳懒；
（2）babel/core的作用：babel/core是babel的核心庫(kù)闲擦，最終將ES6語(yǔ)法轉(zhuǎn)換成低級(jí)JS語(yǔ)法的就是他；

2场梆、配置：

在webpack的loader配置規(guī)則下新增一個(gè)節(jié)點(diǎn)：
  module: {
        rules: [
            //    file-loader的配置規(guī)則
            省略...
            // url-loader的配置規(guī)則
            省略...
            // postcss-loader的配置
            省略...
            // babel-loader的配置
            {
                test: /\.js$/,
                // exclude是將node-module文件夾下的JS文件排除墅冷，
                //因?yàn)榈谌讲寮呀?jīng) 處理了語(yǔ)法轉(zhuǎn)換
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

三、使用babel/preset-env 讓babel將ES6語(yǔ)法轉(zhuǎn)換成ES5
1或油、安裝：npm install @babel/preset-env --save-dev
2寞忿、配置

module: {
     rules: [
         //    file-loader的配置規(guī)則
         省略...
         // url-loader的配置規(guī)則
         省略...
         // postcss-loader的配置
         省略...
         // babel-loader的配置
         {
             test: /\.js$/,
             // exclude是將node-module文件夾下的JS文件排除，
             //因?yàn)榈谌讲寮呀?jīng) 處理了語(yǔ)法轉(zhuǎn)換
             exclude: /node_modules/,
             loader: "babel-loader",
            options:{
                 "presets": ["@babel/preset-env"]
             }
         }
     ]
 },

四顶岸、使用babel/polyfill補(bǔ)充瀏覽器沒(méi)有實(shí)現(xiàn)的語(yǔ)法：

1腔彰、安裝：npm install --save @babel/polyfill

2、使用：在 業(yè)務(wù)代碼文件頂部直接引入：
import "@babel/polyfill";

3辖佣、使用了babel/polyfill后霹抛，當(dāng)我們打包項(xiàng)目時(shí)，babel/polyfill會(huì)自動(dòng)幫我們?cè)诔隹谖募袑?shí)現(xiàn)那些瀏覽器沒(méi)有的語(yǔ)法特性卷谈，導(dǎo)致出口文件體積驟增杯拐，但是，我們可能在我們的項(xiàng)目中僅僅只使用了一兩個(gè)或者壓根沒(méi)使用那些補(bǔ)充的語(yǔ)法，那我們就不需要這些語(yǔ)法補(bǔ)充啊端逼，怎么辦朗兵？？顶滩？
此時(shí)矛市，我們可以在babel-loader的配置規(guī)則中新增一個(gè)參數(shù)：

module: {
        rules: [
            //    file-loader的配置規(guī)則
            省略...
            // url-loader的配置規(guī)則
            省略...
            // postcss-loader的配置
            省略...
            // babel-loader的配置
            {
                test: /\.js$/,
                // exclude是將node-module文件夾下的JS文件排除，
                //因?yàn)榈谌讲寮呀?jīng) 處理了語(yǔ)法轉(zhuǎn)換
                exclude: /node_modules/,
                loader: "babel-loader",
               options:{
                   "presets": [['@babel/preset-env',{
                        useBuiltIns:'usage'
                    }]]
                }
            }
        ]
    },
useBuiltIns:'usage' 的意思是诲祸，只有我們項(xiàng)目中用到的瀏覽器沒(méi)有實(shí)現(xiàn)的語(yǔ)法特性，在打包的時(shí)候而昨，才會(huì)幫我們?cè)诔隹谖募袑?shí)現(xiàn)救氯，而不是把所有的瀏覽器沒(méi)有實(shí)現(xiàn)的語(yǔ)法特性都幫我們?cè)诔隹谖募袑?shí)現(xiàn)；

五歌憨、將babel-loader的配置抽離到 .babelrc 文件中
就是將babel-loader中的options的值着憨，單獨(dú)放到 .babelrc 文件中；

1务嫡、在項(xiàng)目根目錄下創(chuàng)建一個(gè) .babelrc 文件
2甲抖、將bable-loader的options選項(xiàng)的值（{}這個(gè)形式），放到.babelrc文件中即可心铃；