前言
在前端开发中，使用 Webpack 已经成为了不可避免的选择。Webpack 是一个模块化打包工具，它可以将项目中所有的代码和资源打包成一个或多个 bundle，这样可以减少请求次数和代码的大小，提高页面加载速度。
React 和 Redux 是当前最流行的前端框架之一，它们的结合可以构建一个复杂的单页面应用程序。在本文中，我们将介绍如何使用 Webpack 搭建一个简单的 React+Redux 项目。
项目结构
项目结构如下：
-- -------------------- ---- ------- --- ---- - --- ---------- - --- --------------- - --- ---------------- --- --- - --- ------- - - --- -------- - --- ---------- - - --- ------- - - --- ----------- - - --- ---------- - - --- ---------- - --- --------- - - --- -------------- - --- -------- - - --- -------- - --- --------- - --- -------- --- ------------ --- -----------------
其中，src 目录是我们工作的主要目录，dist 目录是 Webpack 打包后输出的目录。package.json 是项目的配置文件，webpack.config.js 是 Webpack 的配置文件。
搭建环境
首先，我们需要搭建开发环境。在本文中，我们需要安装以下工具：
- Node.js
- NPM 或 Yarn
安装完成后，我们可以通过以下命令在命令行中查看版本信息：
node -v npm -v # 或 yarn -v
在搭建完成环境后，我们可以开始安装项目依赖。
# 使用 npm 安装 npm install react react-dom react-redux redux # 使用 yarn 安装 yarn add react react-dom react-redux redux
配置 Webpack
我们现在可以开始配置 Webpack 了。
首先，我们需要在项目的根目录下创建 webpack.config.js 文件，并填写以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ ------------------
------- -
----- ----------------------- --------
--------- ------------------------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
--------------------- - -------- ----- ---
----------------------
--
-------- -
------------------------------------------
----------------------------------
--
--
--
--
-
----- ----------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- -------------------
--------- ---------------
---
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
----- -----
--
--我们在 webpack.config.js 文件中定义了入口文件和出口文件，以及使用 babel 和 css-loader 来处理 jsx 和 css 文件。
我们还添加了一个 HtmlWebpackPlugin 插件，用于将打包后的文件自动生成到 dist 目录下的 index.html 中。DevServer 也已经被配置好了，用于在本地运行打包后的应用。
Babel 配置
Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 6+ 代码转换成向下兼容的版本。
我们需要在项目根目录下创建 .babelrc 文件，并填写以下内容：
-- -------------------- ---- -------
-
---------- -
--------------------- - ---------- ----- ---
---------------------
--
---------- -
------------------------------------------
---------------------------------
-
-这里我们使用了 @babel/preset-env，它可以将 ECMAScript 6+ 代码转换成向下兼容的版本，并且可以根据浏览器的版本、环境变量和目标运行时环境等信息启用相关的插件和 polyfill。
编写代码
现在我们已经完成了 Webpack 的配置，下面我们就可以开始编写我们的代码了。
创建组件
我们需要在 src/components 目录下创建以下组件：
-- -------------------- ---- -------
-- ----------------------
------ ----- ---- --------
------ ------ ---- -----------
------ ------- ---- ------------
------ ------ ---- -----------
----- --- - -- -- -
------ -
-----
------- --
-------- --
------- --
------
--
--
------ ------- ----// src/components/Header.jsx
import React from 'react';
const Header = () => {
return <h1>Webpack React+Redux Example</h1>;
};
export default Header;-- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - -- ------- ---- -------------
----- ------- - -- ------ ------- -- -- -
------ -
-----
----------------
--------- -----------
------- ----------- -- -------------------------------
------- ----------- -- -------------------------------
------
--
--
----- --------------- - ------- -- -- ------ ----------- ---
----- ------------------ - ---------- -- -- -------- --------------------------- --------- ---
------ ------- ------------------------ -----------------------------// src/components/Footer.jsx
import React from 'react';
const Footer = () => {
return <p>By Perfect Little Ones, Inc.</p>;
};
export default Footer;创建 actions 和 reducer
我们需要在 src/actions 目录下创建以下文件：
// src/actions/index.js
import * as types from '../constants/actionTypes';
export const increment = () => ({ type: types.INCREMENT });
export const decrement = () => ({ type: types.DECREMENT });我们需要在 src/constants 目录下创建以下文件：
// src/constants/actionTypes.js export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';
我们需要在 src/reducers 目录下创建以下文件：
-- -------------------- ---- -------
-- ---------------------
------ - -- ----- ---- ---------------------------
----- ------------ - -
------ --
--
------ ----- -------------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ - ------ ----------- - - --
---- ----------------
------ - ------ ----------- - - --
--------
------ ------
-
--创建 store 和入口文件
我们需要在 src 目录下创建以下文件：
// src/store.js
import { createStore } from 'redux';
import { counterReducer } from './reducers';
const store = createStore(counterReducer);
export default store;-- -------------------- ---- -------
-- -------------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- -------------------
----- ------------- - -
--------- --------------
---- --
-----------
--
------ ------- --------------我们还需要在 src 目录下创建一个 index.html 文件，作为应用程序的入口文件。这里我是引用了 CDN 上的 react 和 react-dom 的资源。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----------- ---------------
-------
------
---- ----------------
------- ---------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- ---------------------------------
------- ----------------------------------
-------
-------完整代码见仓库：https://github.com/LiXiangUCAS/webpack-react-redux-example
运行项目
完成了代码编写后，我们就可以在本地运行项目了。
# 使用 npm 运行 npm run start # 使用 yarn 运行 yarn start
运行后我们可以在浏览器中输入地址 http://localhost:9000 查看效果。
总结
在本文中，我们学习了如何使用 Webpack 搭建一个简单的 React+Redux 项目。我们了解了如何配置 Webpack，创建组件、actions、reducer、store 和入口文件。最后，我们成功地运行了项目并查看了效果。
使用 Webpack 可以将我们的项目代码打包成一份或多份 JavaScript 文件，通过实现代码的模块化来加速应用程序的加载速度，提高用户体验。使用 React 和 Redux 可以让我们构建复杂的单页面应用程序，上述两种技术的结合使用将会在前端开发中发挥更大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fc0267f6b2d6eab32009fc
