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

本文主要是介绍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 babel-loader@7.0.0 -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了！！！

这篇关于webpack4.x配置 babel版本7.x 配置 React【踩坑】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---