本文将介绍如何使用 webpack、react、react-router 搭建自动生成多页面 spa 应用的脚手架，并提供示例代码，帮助读者快速上手，掌握相关知识。
前置知识
- webpack
- react
- react-router
- ES6
什么是多页面 spa 应用
传统的多页面应用，每个页面都需要从服务器端请求 HTML、CSS、JS 等资源，切换页面时需要重新加载整个页面。而 spa（Single-Page Application）应用则只有一个页面，所有的数据都在这个页面中，通过前端路由实现页面切换，不需要重新加载整个页面，在用户体验上更加流畅。
然而，随着 spa 应用的逐渐普及，单页面也已经无法满足需求。比如，需要支持 SEO（Search Engine Optimization）等业务需求，就需要在不同 URL 下提供对应的页面。此时，多页面 spa 应用应运而生，它既保留了 spa 应用的流畅体验，又支持了多页面的需求。
为什么需要构建工具
多页面 spa 应用需要支持多个页面，每个页面都需要像单页面应用一样拥有自己的路由、状态管理、组件等。这就需要我们写一大堆相似但又不完全相同的代码，非常繁琐而且容易出错。因此，我们需要用构建工具来自动化这个过程，帮助我们快速生成多个页面，并提供相应的路由管理、状态管理等功能。
webpack 配置
这里我们以 webpack 为构建工具，配置文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -----------------
------- -
--------- ---------------
----- ----------------------- --------
----------- ----
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -----------------
--
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- ---------------------
--- -------------------
--------- -------------
--------- --------------------
------- ---------
---
--
---------- -
------------ ---------
----- -----
------------------- -----
--
--这里使用了 HtmlWebpackPlugin 插件来生成 HTML 文件，同时使用了 CleanWebpackPlugin 插件来清除每次构建时产生的垃圾文件。
React+React-Router 管理多页面
在 react 中，我们可以使用 BrowserRouter 和 Route 来管理路由。对于多页面应用，我们可以在每个页面中使用一个独立的 BrowserRouter，并在其中添加对应的 Route。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- ----- - ---- -------------------
------ ---- ---- ---------
------ ----- ---- ----------
----------------
---------------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
-----------------
-------------------------------
--在上面的示例中，我们分别定义了两个页面的路由，分别为 '/' 和 '/about'。
自动生成多个页面
我们可以使用 HtmlWebpackPlugin 插件来自动生成多个 HTML 文件，并使用 html-webpack-plugin-multihtml 插件来支持生成多个多页面 html 文件。示例代码如下：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- --------- - -----------------------------------------
-------------- - -
------ - ----- ----------------- ------ ---------------- --
-- ------
-------- -
--- ---------------------
--- ----------------------------------
--------- ----------------------
------ -
- --------- ---------------------- ------- -------- --
- --------- ---------------------- --------- ------------- ------- --------- --
--
---
--
-- ------
-在上面的示例中，我们定义了两个 entry，分别为 main 和 about。同时，在 plugins 中使用了 MultiHtmlWebpackPlugin 插件来指定需要生成的 HTML 文件。其中，template 指定了模板文件，chunks 指定了需要注入的 js 文件。下面我们来看一下模板文件的定义。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------- ------------------------------- ----------
-------
------
---- ----------------
-- --- ---- ----- -- --------------------------------- - --
------- -------- ----- -----------------------
-- - --
-------
-------在上面的模板中，我们首先获取了 htmlWebpackPlugin.options.title，它对应的是 HtmlWebpackPlugin 插件的配置项。接着，我们循环注入了所有的 js 文件，即上面的 chunk。
最终结果
经过上面的配置，我们就可以成功生成多个页面的多页面 spa 应用了。示例代码参见：https://github.com/mlz0088/webpack-react-multi-page
总结
本文介绍了如何使用 webpack、react、react-router 搭建自动生成多页面 spa 应用的脚手架，这个过程中我们学习了 webpack 的配置、react-router 的使用、以及 HTML 文件自动生成。在构建多页面应用时，我们应该尽可能地复用组件、路由、状态管理等代码，减少代码的重复。同时，在面对不同页面特殊需求时，也可以通过合理的代码结构和规范来避免代码的混乱。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647830b6968c7c53b047216b