polyfill

Babel只能處理一些JS的語法，如下ES6等的新用法不支持，需要使用polyfill(兼容性處理)

• 新的語法（箭頭函數）
• 新的ES API（Promise）
• 新的實例方法(String.prototype.includes)

babel-polyfill

• babel默認只轉換新的javascript語法，而不轉換新的API(Iterator,Generator,Set,Maps,Proxy,Reflect,Symbol,Promise)
• ES6，新增的Array.form方法，Babel就不會轉碼這個方法，如果想使用這個方法，必須使用babel-polyfill來轉換
• 安裝babel npm i babel-loader @babel/preset-env @babel/core -D
• babel-polyfill 向全局對象和內置對象的prototype（原型上）上添加方法來實現的；缺點會造成全局變量的污染；

使用

• uesBuiltIns:false; 全量打包大概404K（無視兼容性）
• useBuiltIns:"entry",會去讀取package.json,要引入corejs

要手動引入 步驟一

import '@babel/polyfill';//corejs2 直接引用（全量）404K 會很大 需要另外配置
//或者corejs3 前提是安裝corejs3
import 'core-js';
import 'regenerator-runtime/runtime'; 
console.log('hello',);

步驟二

//package.json 增加
"browserslist": {
        "development": [//瀏覽器
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ],
        "production": [//瀏覽器市場占有率
            ">1%"
        ]
    }

步驟三：

 module:{
        rules:[
            {
                test:/\.js$/,
                use:[
                    {
                        loader:'bable-loader',
                        use:[
                            {
                                loader:'babel-loader',
                                options:{
                                    preset:[
                                        "@babel/preset-env",{
                                            useBuiltIns:'entry',//配置polyfill的相關情況
                                            corejs:3，//polyfill 基于corejs實現的
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                ]
            },
        ]
    },

• useBuiltIns:"usage",會根據使用情況按需導入（最優）

• core-js;set map靠它實現 core-js2