React 是一个由 Facebook 推出的开源 JavaScript 库，用于构建用户界面。它让开发者能够使用组件化的方式构建 Web 应用程序，并提供了许多便捷的工具和方法。然而，为了将 React 应用程序部署到生产环境中，我们需要使用 Webpack 和 Babel 这两个工具来将 JavaScript 代码打包并转换为主流浏览器也能够兼容的格式。
在这篇文章中，我们将学习如何使用 Webpack 和 Babel 构建一个简单的 React 应用。通过这个例子，我们将了解到如何设置 Webpack 和 Babel 的基本配置，并将 React 代码转换为浏览器可识别的代码。
前置知识
我们假设您已经了解了以下内容：
- 了解 JavaScript、npm 和 Node.js 的基本知识。
- 熟悉 React 库。如果您还没有使用过 React，可以参考官方文档入门。
- 熟悉 ES6 语法。
安装依赖
在开始之前，您将需要安装以下依赖：
- webpack
- webpack-dev-server
- babel-loader
- @babel/core
- @babel/preset-env
- @babel/preset-react
- react
- react-dom
您可以使用以下命令来安装这些依赖：
npm install webpack webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react react react-dom --save-dev
注：为了简化这个例子，我们将使用 React 的 CDN 来引入 React 和 React DOM。但是，这样做不是一个好习惯。在实际项目中，我们应该使用 npm 来管理依赖项，并使用 webpack 来打包代码。
配置 webpack
首先，我们需要创建一个 webpack 的配置文件。在项目根目录下创建一个名为 webpack.config.js 的文件，并将以下代码粘贴到文件中：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- ---------------
--
--
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--在这个文件中，我们定义了 webpack 的入口和出口文件。在这个例子中，我们有一个名为 index.js 的入口文件，它将作为我们 React 应用程序的起点。
我们还定义了一个名为 module 的设置，它指定在打包代码时使用的 loader。在这个例子中，我们正在使用 babel-loader。
最后，我们定义了一个名为 devServer 的设置，这个设置用于启动 webpack-dev-server，以便我们可以在本地运行我们的应用程序。我们还指定了端口号 9000，当我们在浏览器中访问它时，将从该端口提供应用程序。
配置 Babel
接下来，我们需要配置 Babel。在项目根目录下，创建一个名为 .babelrc 的文件，并将以下代码粘贴到文件中：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}在这个文件中，我们定义了两个预设。@babel/preset-env 预设用于将我们的 ES6+ 代码转换为主流浏览器也能够兼容的 JavaScript。@babel/preset-react 预设用于将我们的 React 代码转换为浏览器可识别的代码。
编写 React 代码
现在，我们已经配置好了 Webpack 和 Babel，接下来我们可以编写我们的 React 代码。在 src 文件夹下，新建一个名为 index.js 的文件，并将以下代码粘贴到文件中：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));在这个文件中，我们首先导入了 React 和 ReactDOM。然后，我们定义了一个名为 App 的组件，它返回一个包含“Hello World！”文本的 h1 元素。最后，我们使用 ReactDOM 渲染该组件，并将它插入到页面的根元素中。
运行应用程序
现在，您已经完成了所有的步骤。为了在浏览器中运行我们的应用程序，请使用以下命令启动 webpack-dev-server：
npx webpack-dev-server --mode development
接下来，在浏览器中访问 http://localhost:9000。您应该能够看到一个包含“Hello World！”文本的 h1 元素。
总结
在本文中，我们介绍了如何使用 Webpack 和 Babel 构建一个简单的 React 应用程序。我们了解了如何设置 webpack 的基本配置和 Babel 的预设，并将 React 代码转换为浏览器可识别的格式。这个例子非常基础，但是您可以将它作为起点，开始学习如何使用这些强大的工具来构建更加复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e0d3448841e9894aa0350