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