最近，一个名为 create-webpack-react-multi-page-app 的 npm 包发布了，它可以极大简化开发者们创建多页面 React 应用的过程，本文将详细介绍这个 npm 包的使用方法。
什么是 create-webpack-react-multi-page-app
create-webpack-react-multi-page-app 是一个基于 webpack 和 React 的多页面应用脚手架，可以用它快速搭建多页面 React 应用。这个脚手架是在 create-react-app 的基础之上进行了扩展，具有更多的配置选项，主要特性如下：
- 支持多页面应用开发。
- 支持加载全局 CSS 和 JS。
- 支持自定义项目配置。
- 支持根据不同的环境进行打包。
安装
通过 npm 安装这个脚手架非常简单:
npx create-webpack-react-multi-page-app my-app
npx 是 npm 包执行工具，用它执行 create-webpack-react-multi-page-app 命令，并指定项目名 my-app，即可快速创建一个多页面 React 应用。
使用
创建好项目后，进入项目目录，使用以下命令启动开发服务器：
npm start
npm start 命令会在 http://localhost:3000/ 启动一个本地服务器，并自动打开浏览器。
现在您可以开始开发 React 应用了，在浏览器里查看效果，代码修改后将自动重载。
目录结构
一个典型的多页面 React 应用目录结构如下：
-- -------------------- ---- -------
-------
---------
-------------
------------
----
-------
-----------
------
-------
---------
-----
-----------
-------
----------
--------
------
-----------
--------
----------
--------
----------
--------
--------
-------
------
-------项目目录中的 common 子目录是公共组件和样式，而 src 目录下的每个子目录都对应着一个页面。每个页面有一个 HTML 文件和一个 JS 文件，可以根据需要放置选项设置、路由设置等配置。webpack 子目录下的三个配置文件分别对应着基础配置、开发环境配置和生产环境配置。这些配置文件封装了构建项目时需要用到的各种工具和插件。
添加新页面
要添加新页面，只需在 src 目录下创建一个新的子目录，然后在该子目录下创建一个 HTML 文件和一个 JS 文件，具体步骤如下：
- 在
src目录下创建一个新的目录newpage。
mkdir src/newpage
- 创建
newpage/index.html文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------- ------------
-------
------
---- ----------------
-------
-------- 创建
newpage/index.js文件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../common/components/App';
ReactDOM.render(<App />, document.getElementById('root'));- 在
webpack目录下的配置文件中添加新页面的配置：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-- ---
------ -
----- ----------------------
------ -----------------------
- -------- -------------------------
--
-- ---
--
-- --------------
-------------- - -
-- ---
-------- -
-- ---
--- -------------------
------- ---------
--------- ------------
--------- ------------------------
---
--- -------------------
------- ----------
--------- -------------
--------- -------------------------
---
- --- -------------------
- ------- ------------
- --------- ---------------
- --------- ---------------------------
- ---
--
-- ---
--
-- ---------------
-------------- - -
-- ---
-------- -
-- ---
--- -------------------
------- ---------
--------- ------------
--------- ------------------------
------- -
--------------- -----
------------------- -----
-------------------------- -----
---------------- -----
---------------------- -----
------------------------------ -----
----------------- -----
--------- -----
---------- -----
----------- -----
--
---
--- -------------------
------- ----------
--------- -------------
--------- -------------------------
------- -
--------------- -----
------------------- -----
-------------------------- -----
---------------- -----
---------------------- -----
------------------------------ -----
----------------- -----
--------- -----
---------- -----
----------- -----
--
---
- --- -------------------
- ------- ------------
- --------- ---------------
- --------- ---------------------------
- ------- -
- --------------- -----
- ------------------- -----
- -------------------------- -----
- ---------------- -----
- ---------------------- -----
- ------------------------------ -----
- ----------------- -----
- --------- -----
- ---------- -----
- ----------- -----
- --
- ---
--
-- ---
--部署
经过本地调试后，可以通过以下命令将项目打包为生产环境版本：
npm run build
npm run build 命令会在 build 目录下生成打包后的项目文件，可以将这些文件上传到服务器。如果您使用的是 GitHub Pages，可以使用 npm run deploy 命令将文件提交到 GitHub Pages 分支。
结语
本文介绍了 create-webpack-react-multi-page-app 的使用方法，它可以快速搭建多页面 React 应用，可以更灵活地设置各种选项，并满足不同环境的需求。读者可以按照本文的步骤，快速上手使用这个脚手架。更多详细信息可以查看 GitHub 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672563660cf7123b36373