webpack4.x配置 babel版本7.x 配置 React【踩坑】

babel-loader7.x 一定要与 babel6.x 他们两个版本结合用

babel-loader8.x 一定要与 babel7.x 他们两个版本结合用

---

1、babel-loader7.x 与 babel6.x 版本配置

如果你的babel-loader7.x 的版本，一定要与 babel6.x 的版本结合用

例子：

1. 首先单独指定安装 babel-loader7.x，运行 cnpm i [email protected] -D
2. 然后安装你所用的，这里是我的例子：
   cnpm i babel-core babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
   安装能够识别转换 JSX 语法的包：
   cnpm i babel-preset-react -D
3. 添加 .babelrc 配置文件，并配置

   {
   	"presets":["env","stage-0","react"],
   	"plugins":["transform-runtime"]
   }
   

4. 在webpack.config.js 配置文件，添加 babel-loader 配置项

   module: {//所有第三方模块的匹配规则
       rules: [//第三方匹配规则
           // exclude 一定要排除这个文件
           { test: /\.js|jsx$/, use: "babel-loader", exclude: /node_modules/ },//千万不能忘记添加 exclude排除项
       ]
   }
   

---

到这里就是配完babel-loader7.x 与 babel6.x 版本的包了，然后删除node_modules 文件，重新下载所有的包和插件，运行 cnpm i ，再次运行项目就OK了！

---

2、babel-loader8.x 与 babel7.x 版本配置

注： 一定要注意，babel7.x 版本跟之前的差别非常大，在 版本7.x 中，废弃了 stage-0 ，而且命令也进行了很大改动，如果安装了 babel6.x 版本，可以先卸载，或者直接进行如下安装，例子：

1. 运行 :
   cnpm i @babel/core -D
cnpm i babel-loader -D
cnpm i @babel/preset-env
cnpm i @babel/preset-react -D
cnpm i @babel/plugin-transform-runtime -D
   注： 这里我是一步步安装，你也可以一块安装！！！
2. 在你的 .babelrc 文件中进行如下配置

   {
   	"presets": [
     		"@babel/preset-env",
     		"@babel/preset-react"
   	],
   	"plugins": [
       	"@babel/plugin-transform-runtime"
   	]
   }
   
   

---

到这里配置完了，把node_modules 文件删除，然后重新下载所有安装的包和插件，运行 cnpm i，然后运行项目就OK了！！！