随着 React 应用的逐渐成熟，Webpack 作为一个打包工具，已经成为了前端开发过程中不可缺少的一环。而在现在的项目中，用 Webpack 来搭建 React 的开发环境已经成为了前端开发的标配。本文将深入讲解如何使用 Webpack4 来搭建 React 的全流程开发环境，包含从安装到配置到使用的详细步骤，并提供示例代码。
1. 安装 Webpack4
首先我们需要在全局安装 Webpack4：
npm install webpack webpack-cli -g
2. 安装 React
使用 npm 安装 React 依赖：
npm install react react-dom --save
3. 配置 Webpack
Webpack 配置文件通常命名为 webpack.config.js，在项目根目录下创建该文件，并加入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- -----------------------
-
-
-
-
--
-------- -
--- -------------------
--------- ---------------------
--
--
---------- -
------------ ---------
----- ----
-
--在这个配置文件中：
- entry：配置了入口文件
- output：配置了输出文件
- module：配置了使用 Babel-loader 编译 jsx 语法
- plugins：使用 HtmlWebpackPlugin 注入打包后的 bundle 到 index.html
- devServer：配置了开发服务器
需要注意的是，这里的 Babel 配置只添加了 '@babel/preset-react'，如果需要使用 ES6，还需要添加 '@babel/preset-env'。
4. 配置 Redux
如果你需要使用 Redux 来管理 React 应用的状态，那么还需要安装 Redux 和相关的依赖：
npm install redux react-redux --save
然后，在 src 目录下创建 store 目录，然后创建 index.js 文件：
import { createStore } from 'redux';
import reducer from '../reducers';
const store = createStore(reducer);
export default store;在 index.js 文件中引入该 store：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- -------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在此之前，还需要在 reducers 目录下创建 Redux 的 reducer。
5. 编写打包前的入口文件
在 src 目录下创建 index.js 入口文件，然后引入：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- -------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--6. 编写 React 组件
在 src/components 目录下创建 App.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-
------ ------- ----7. 编写打包前的 HTML 文件
在 public 目录下创建 index.html 文件，然后引入：
-- -------------------- ---- -------
----- ----------
------
----- --------------- --
--------------------
-------
------
---- ----------------
-------
-------8. 打包项目
运行以下命令打包：
webpack --mode production
打包后会在 dist 目录下生成 bundle.js 文件。然后在浏览器中打开 index.html，就可以看到页面上渲染出了「Hello, World!」的字样。
总结
本文详细介绍了使用 Webpack4 配置 React 的全流程，包含安装，配置，编写 React 组件，打包项目等步骤，并提供了示例代码。希望对初学 React 的同学有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6502910795b1f8cacdfd2c44