根據官網https://www.npmjs.com/package/babel-loader要對應版本
一、babel7.X版本
1.要安裝的包
第1套包：npm i babel-core babel-loader@7 babel-plugin-transform-runtime –D(千萬記得是babel-loader@7，不是其他的)
第2套包：npm I babel-preset-env babel-preset-stage-0 –D(注意是-零，不是字母o)
這里babel-loader一定要加版本號7，否則下載的將是最新版本8
2.webpack.config.js配置文件中，rules節點的配置寫法
{ test: /\.js$/, use: 'babel-loader',exclude:/node_modules/},
注意：
①雖然是2套包，但對於loader來說只有一個，所以urse屬性只有一個loader。
②exclude是排除的意思。這個屬性的意思就是不要去匹配node_modules目錄中的文件。
③node_modules中的文件都已經是現成的包了，人家都打包好了，不需要我們再去打包。
④而且該目錄中代碼文件太多，排除掉它，也能提高很高的打包性能
3.配置.babelrc文件
{
“presets” : [“env”, “stage-0”],
“plugins” : [“transform-runtime”]
}
注意：
①"presets"是用來配置處理“語法”的項。這2套包中，帶有preset的包是babel-preset-env 和 babel-preset-stage-0 ，他們的名字分別是env/stage-0，前邊的babel-preset是前綴。
②"plugins"是用來配置插件的項。這2套包中，只有babel-plugin-transform-runtime是插件，並且該插件的名字是“transform-runtime”
二、使用babel8.X版本
先從大體上介紹一下babel8的變化點。
第一，各個包的名字變了，都以@符號開頭。這個變化帶來2個影響。其一，以前每個包在node_modules目錄下都是一個獨立的文件夾；現在則在node-modules目錄下有個叫“@babel”的目錄，這里要安裝的所有babel包，都在這個@babel目錄下保存。其二，在配置的時候，寫法完全變了。
第二，有一些包被徹底廢棄。比如在babel7.X版本中用到的babel-preset-stage-0
第三，有一些新的包必須引入進來才可以。
具體用法如下：
1.必須安裝的包如下：
需要注意的是，這些@開頭的包，在實用npm安裝時，包名必須用引號引住，否則npm會把它當做不可識別的字符。例如:
npm i babel-loader '@babel/core' -D
babel-loader沒有@符號，所以不需要引號包住；@babel/core則需要用引號包住。其他以此類推
這里小版本號就不要計較了，只要大版本號能對上就都一樣。
2.各個包的作用如下
- babel-loader：加載器
- @babel/core：babel核心包,babel-loader的核心依賴
- @babel/preset-env：ES語法分析包
- @babel/runtime和@babel/plugin-transform-runtime：babel 編譯時只轉換語法，幾乎可以編譯所有時新的 JavaScript 語法，但並不會轉化BOM（瀏覽器）里面不兼容的API。比如 Promise,Set,Symbol,Array.from,async 等等的一些API。這2個包就是來搞定這些api的。
- @babel/plugin-proposal-class-properties：用來解析類的屬性的。
3.配置webpack.config.js。由於“babel-lodaer”包名字沒變，api寫法也沒變，還是那么寫
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},//處理高級ES語法的babel_lodaer
4.添加.babelrc配置文件，並在該文件中寫下如下配置信息
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"]
}
參考：https://www.cnblogs.com/ldq678/p/10448374.html但是原文有錯，可以對比一下
https://www.cnblogs.com/soyxiaobi/p/9554565.html