webpack之前一知半解，這次有空就把最新的webpack4好好學習一下(2019-05-29 因為webpack的很多東西版本都在升級，網上博客很多都是老版本的，所以加個時間方便大家決定是否有必要閱讀)
presets預設
預設是一組插件的集合，插件才是讓babel解析之后轉換的關鍵，插件是從前到后，而預設是從后到前執行，插件在 Presets 前運行。
常見的預設有以下幾個：
- @babel/preset-env
@babel/preset-env是babel v7新版的，舊版的叫babel-preset-env，按照es年代分有什么babel-preset-es2015（就是轉換es6版本的），@babel/preset-es2016之類的，如果一個一個導入到你的項目會很麻煩，新的es出來了你還得加，現在@babel/preset-env就是所有的es集合，有了它，babel-preset-es2015，@babel/preset-es2016都不需要加了（除非你就有什么特定配置）。
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"]
},
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
]
targets是指轉換哪些瀏覽器，如果沒有什么特別的需求，選擇默認的就好了
modules 有這些選擇"amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, defaults to "auto" 是用來將將es6的模塊化語法轉換為哪種語法，現在有webpack來做了，這個可以選擇false了
useBuiltIns 現在是重點了，選擇如下 "usage" | "entry" | false, defaults to false
false就不用解釋了，就是不使用這個功能唄。
介紹另外2個我們先看看@babel/polyfill這個東東，它基本包含了所有的babel的功能，使用的方法也很簡單，直接在主js上面import "@babel/polyfill";就可以了，缺點也很明顯
1 它把所有的功能都導入你的項目里去了，自然會導致你的項目打包過大，如果你不在意自然直接使用最簡單，用最少的配置。（usage" | "entry就是用來優化這個的）
2 它會在全局加入一些方法如promise，會導致全局污染
entry選項是這樣子的，根據你選擇的瀏覽器環境來決定@babel/polyfill有哪些是需要加入你項目的，如果你的指定的瀏覽器支持一些語法，就沒必要再導入一遍了
usage則是根據你的代碼中用到了哪些（直接通過名字來決定）新方法，就從@babel/polyfill加入到你的項目，該方法目前還是實驗性的。
corejs 官網的文檔配置里目前沒有這個，但是“useBuiltIns": "usage"后會提示安裝core-js，版本如果為3就要指定版本，並且在主文件以前是import "babel-polyfill";，改為import "core-js/stable"; import "regenerator-runtime/runtime";
- @babel/preset-stage-0 @babel/preset-stage-1 ...
這些其實已經被廢棄了，不過挺經典的值得了解一下，stage-0是指標准，目前還沒有納入es的一些功能，裝飾器就是其中之一
stage0 (https://babeljs.io/docs/en/babel-preset-stage-0) 只是一個美好激進的想法，一些 Babel 插件實現了對這些特性的支持 ，但是不確定是否會被定為標准.
stage1 (https://babeljs.io/docs/en/babel-preset-stage-1) 值得被納入標准的特性.
stage2 (https://babeljs.io/docs/en/babel-preset-stage-2) 該特性規范己經被起草，將會被納入標准里.
stage3 (https://babeljs.io/docs/en/babel-preset-stage-3) 該特性規范已經定稿，大瀏覽器廠商和 Node.js 社區己開始着手實現.
stage0包含了它下面的，stage1也包含了它下面的的，依次包含。
但是官網說他們被廢棄了，具體原因大概是因為太好用了，以至於大家都是stage0就開始用了，但是卻不知道stage0到底包括什么，如果規范有了變化，你都不知道到底發生了什么，於是乎babel決定
你想用一些es還沒有出來的功能，你要用插件的方式安裝具體你需要的而不是一個stage0了事，文檔如下
https://github.com/babel/babel/blob/master/packages/babel-preset-stage-0/README.md
@babel/plugin-transform-runtime 和 @babel/runtime
這2個就是用來解決@babel/polyfill的第二個問題，污染環境變量的問題，其實官網上說了，污染的問題只有可能是你的項目作為庫使用才會存在，普通的應用程序，直接使用polyfill是沒有問題
@babel/runtime是運行時，而@babel/plugin-transform-runtime是插件安在dev上的，
"plugins": [
["@babel/transform-runtime", {
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}]
]
這2個只能用來解決全局變量問題，原型的實例方法沒辦法加，還是要用到polifill