React 是目前最流行的前端框架之一。它的组件化思想和虚拟 DOM 技术使开发者更加高效和灵活地开发 Web 应用。但是使用 React 开发一个大型应用时，需要考虑到同构、路由、热更新等复杂的问题。这就需要使用到一些工具，如 Webpack 和 Babel，来协助我们完成这些任务。
在本文中，我们将介绍如何使用 Webpack 和 Babel 打造一个简单的 React 开发模板，包括如何使用 Webpack 实现热更新、如何使用 Babel 转换 ES6+ 的代码。
安装环境
在开始之前，我们需要先安装 Node.js 环境和 Git 工具。如果您尚未安装，可以从官网上下载并安装。
接着，我们使用 npm 安装 Webpack 和 Babel：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
我们同时也安装了 HTML Webpack Plugin，它是一个将 Webpack 打包后的文件自动插入 HTML 文件中的工具，用于在开发时方便地预览网页。
配置 Webpack
我们创建一个新的目录，命名为 react-starter，在其中创建一个名为 src 的目录，用于存放 React 的代码。在 src 目录中，创建一个名为 app.js 的文件，用于存放 React 的代码。
在项目根目录下创建 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ ---------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -----------------
--
--
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
---
--
--以上配置是一个基本的 Webpack 配置。其中，entry 指定了入口文件，output 指定了打包后的文件名和文件输出路径。module 中的 rules 指定了使用 babel-loader 来处理 js 文件，并排除 node_modules 中的文件。plugins 中配置了 HTML Webpack Plugin，并指定了模板路径和输出文件名。
接着，我们创建一个名为 public 的目录，在其中创建一个名为 index.html 的文件。我们在 index.html 中添加一个空的 div 元素，用于渲染 React 组件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------ ---------------
-------
------
---- ---------------
-------
-------在 package.json 文件中添加以下代码：
"scripts": {
"start": "webpack serve --open",
"build": "webpack",
},以上代码用于启动开发服务器和打包生产环境代码。现在，我们可以启动开发服务器，查看我们的 React 应用了。
在终端中输入以下命令：
npm start
打开浏览器，输入 http://localhost:8080/ 以访问我们的应用程序。此时应该可以看到一个空的页面，其中包含一个 ID 为 app 的空元素。
配置 Babel
现在我们的开发服务器已经可以正常运行了，但是我们还需要在支持新的 ECMAScript 标准，在代码中使用如 async/await、箭头函数等新特性。这就需要使用 Babel 来将新标准转换为现有标准。
我们创建一个名为 .babelrc 的文件，并添加以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}其中，presets 指定了要使用的 Babel 插件。
现在我们可以修改 app.js 文件中的内容，并使用一些新特性：
-- -------------------- ---- ------- ----- ------------- - ----- -- -- - ----- --- - ----- ----------------------------- ----- ---- - ----- ----------- ------------------ -- ----- --- - -- -- - ---------------- ------ --------- ----------- -- ------ ------- ----
在我们修改代码之后，Webpack 会在保存代码的同时重新构建项目并重新加载浏览器页面，无需手动刷新浏览器。
在终端中输入 npm start 启动开发服务器，并使用浏览器查看我们的应用程序，应该可以看到页面中显示了 "Hello World"。
结论
在本文中，我们介绍了如何使用 Webpack 和 Babel 创建一个简单的 React 开发模板，并实现了热更新和 ES6+ 的代码转换。这些都是开发 React 应用程序所必需的工具。通过使用本文中的方法，您可以更加高效和舒适地开发 React 应用程序。
完整的代码示例可以在这里找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770f0dee9a7045d0d8379ef