React 是一款流行的 JavaScript 库，用于构建单页应用程序和复杂的用户界面。Webpack 是一款强大的模块打包工具，可以把多个模块打包成一个或多个文件，实现优化和代码分离。
本文将详细介绍如何在 Webpack 中使用 React 模板。除了基本的安装和配置之外，我们还将涵盖一些常见的问题和解决方案。
1. 安装 Webpack 和 React
首先，我们需要全局安装 Webpack 和 React。在命令行中执行以下命令：
npm install webpack webpack-cli react react-dom --save-dev
2. 创建新项目
我们可以从头开始创建一个新的 Webpack 和 React 项目，或者从现有的项目中添加 React 支持。在本文中，我们将从头开始创建一个新项目。
在终端中创建一个新文件夹，并进入它：
mkdir webpack-react-tutorial cd webpack-react-tutorial
3. 初始化 npm
在心目中，打开新的 Terminal Viewer 视窗，并在其中执行：
npm init
该命令将询问有关您的项目的一些基本信息。按照您的喜好回答问题。该命令将在当前目录中创建一个名为 package.json 的文件，其中包含您的项目信息。
4. 添加入口文件和输出文件
在项目根目录中创建一个名为 src 的文件夹，并在其中创建一个名为 index.js 的新文件。在 index.js 文件中，我们将定义一个 React 组件，并将其渲染到 DOM 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
----- --- ------- --------------- -
-------- -
------ ---------- ------------
-
-
----------------
---- ---
-------------------------------
--这个组件很简单，它只是将 "Hello, World!" 渲染到页面上。在渲染前，我们需要将其呈现到页面中的元素上。
在根目录中，创建一个名为 dist 的文件夹。在该文件夹中，创建一个名为 index.html 的新文件，并添加以下内容：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ----- ----------------
-------
------
---- ----------------
------- -----------------------
-------
-------该文件只包含一个 div 元素（用于呈现我们的 React 应用程序）和一个指向 Webpack 生成的 main.js 文件的 script 元素。
5. 配置 Webpack
在项目根目录中创建一个名为 webpack.config.js 的文件，该文件将包含我们的 Webpack 配置。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
-------- -
----------- ------- --------
--
--这里，我们正在定义我们的入口文件和输出文件。入口文件是 src/index.js，而输出文件是 dist/main.js。我们还在这里定义了一个规则，用于告诉 Webpack 使用 babel-loader 来转换我们的代码。
我们需要安装 babel-loader 和相应的 preset：
npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
6. 运行 Webpack
我们已经创建了一个简单的 React 应用程序，并配置了 Webpack。现在，我们可以使用以下命令编译我们的应用程序：
npx webpack
npx 命令是 npm 5.2.0 版本以上引入的一个主要特性之一，可以帮助我们直接运行安装在当前目录下的 node_modules 目录中的 .bin 文件夹内的包脚本。它的作用类似于全局安装。
我们还可以在 package.json 文件中定义一个脚本，以便更方便地运行 Webpack。打开 package.json 文件，并添加以下代码：
"scripts": {
"build": "webpack"
}现在，我们可以使用以下命令编译我们的应用程序：
npm run build
现在我们就可以启动本地服务器并访问打包好的文件了：
npm i serve npx serve
访问 http://localhost:5000，可以看到我们的 React 应用程序已经在页面上呈现了。
7. 总结
在这篇文章中，我们详细介绍了如何在 Webpack 中使用 React 模板。我们花时间解释了如何配置和运行 Webpack，并提供了一个基本示例。希望这篇文章对初学者有所帮助，并成为您在使用 React 和 Webpack 的过程中的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648708fe48841e98945b41bb