webpack4中Babel配置

1,說明
webpack，默認只能處理一部分ES6新語法，一些更高級處理不了（ES2015+的語法）。需要藉助第三方loader來幫忙處理成低級點的語法，再把結果交給webpack打包編譯處理。通過Babel可以幫助處理ES6+高級語法。
2 ，步驟
2.1 建議安裝以下版本的依賴

{
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5"
  }

命令如下

npm install @babel/core@^7.2.2 @babel/preset-env@^7.3.1 @babel/preset-react@^7.0.0 babel-loader@^8.0.5 -D

爲什麼要指定安裝的版本呢，這是由於在使用中，如果不指定版本，可能會由於版本不兼容的問題導致出錯。一般babel-loader要比babel/core要高一個版本，即前者是8.x.x,後者就需要是7.x.x,若前是7，後版本就是6。

2.2 webpack.config.js配製

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

2.3 在根目錄下新建一個.babelrc文件，內容如下

{
     "presets":["@babel/react","@babel/env"]
}

參考鏈接 https://www.cnblogs.com/jiebba/p/9618930.html