在前端开发中，React 是一个非常流行的 JavaScript 库，它能够帮助我们构建复杂的用户界面。而 webpack 和 Babel 则是用于打包和转译代码的工具，它们都是非常强大的工具，可以使得开发者更加高效地编写代码。
在本文中，我们将介绍如何使用 webpack 4 和 Babel 来构建 React 应用，并且提供相关的示例代码。
准备工作
首先，我们需要安装 Node.js 和 npm，这是前端开发必不可少的工具。可以通过官方网站下载并安装。
接着，我们需要创建一个新的项目目录，并进行初始化：
mkdir my-react-app cd my-react-app npm init -y
安装依赖
接下来，我们需要安装一些必要的依赖项。这里我们需要安装 webpack 和 webpack-cli，以及一些用于处理 React 的依赖项：
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react
这些依赖项的作用分别是：
webpack：打包应用程序所需的核心库。webpack-cli：命令行工具，用于运行 webpack。babel-loader：用于将 ES6 代码转换为浏览器可识别的代码。@babel/core：Babel 的核心库。@babel/preset-env：用于将 ES6+ 代码转换为 ES5 代码。@babel/preset-react：用于将 JSX 转换为 JavaScript。
创建应用程序
现在，我们可以创建我们的 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 的两个核心库：react 和 react-dom。我们创建了一个简单的函数组件 App，它返回一个包含文本的标题元素。接着，我们使用 ReactDOM.render() 函数将 App 组件渲染到 HTML 中的 root 元素上。
配置 webpack
现在，我们需要配置 webpack 来打包我们的应用程序。在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下内容：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- -------- --------- ----------- -- ------- - ------ - - ----- -------------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- ---------------------- - - - - - --展开代码
这里的配置文件告诉 webpack 如何打包我们的应用程序。具体来说，我们指定了入口文件 index.js，以及输出目录和输出文件名。同时，我们还配置了一个规则，用于将 JSX 和 ES6+ 代码转换为浏览器可识别的代码。
运行应用程序
现在，我们可以使用以下命令运行我们的应用程序：
npx webpack --mode development
这里我们使用 npx 命令来运行本地安装的 webpack，而 --mode development 参数告诉 webpack 使用开发模式进行打包。
接着，我们需要创建一个 HTML 文件来展示我们的应用程序。在项目根目录下创建一个名为 index.html 的文件，并添加以下
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36390
