webpack中配置babel

為什么要配置babel？

因為在webpack中，默認只能處理一部分es6的語法，一些更高級的es6和es7語法webpack不能處理，這時就需要第三方的loader即babel來幫助webpack來處理這些高級的語法

 

配置步驟

1、先通過兩套命令來安裝loader：

npm i babel-core babel-loader babel-plugin-transform-runtime -D

npm i babel-preset-env babel-preset-stage-0 -D

2、在webpack.config.js配置文件中的modules節點中添加一個規則

module:{
     rules:[
         {test:/\.js$/,use:'babel-loader',exclude:/node_modules/} 
   ]     
}        

3、在根目錄下創建.babelrc配置文件

作用：用來打包編譯node_modules中所有第三方js文件，否則會非常消耗cpu，打包速度慢，項目會無法運行　

{
    “presets”:["env","satge-0"],
    "plugins":["transform-runtime"]
}

4、在main.js中寫一段高級語法來進行測試

class Preson{
    static info = {name:'sy',age:22}
}
console.log(Preson.name)

5、輸入命令npm run dev 運行

！！！！！！！！！！！！！！！

結果非常不幸，出現了錯誤，哭哭哭，后來在網上找到了解決方法，原來是babel-core不對

轉載自：https://blog.csdn.net/weixin_43086811/article/details/82154795

遇到的問題

應該將babel-core的版本改為7.5.1版本

npm i babel-loader@7.5.1 -D