前言
前端技术日新月异，各种前端框架层出不穷。其中 React 是目前最流行的前端框架之一。随着 React 应用的规模不断扩大，越来越多的人开始选择使用多页应用。这里我们将讲解如何使用 Webpack4 打包 React 多页应用。
什么是多页应用
多页应用（Multiple Page Application），顾名思义，是指一个应用包含了多个页面的情况。相较于单页应用（Single Page Application），多页应用的优势在于更好的浏览器兼容性和 SEO，但相应的也会增加一些额外的开发成本。
为什么要使用 Webpack4
Webpack4 是目前最流行的前端自动化构建工具之一。它实现了模块化开发，并且支持各种前端资源的打包和优化，包括 JavaScript、CSS、图片、字体等。在多页应用中，使用 Webpack4 可以将生成的多个页面打包为一个部署包，从而对整个应用进行统一控制和管理。
开始打包
在打包前，我们需要先创建一个基本的多页 React 应用。这里我们以一个简单的音乐播放器为例。该应用包含两个页面，一个为音乐列表页，另一个为音乐播放页。我们需要根据不同页面的需求来进行不同的打包处理。
安装依赖
我们首先需要安装一些依赖包。这里我们需要使用到 react 和 react-dom，并且还需要安装 Webpack4 相关的依赖包。
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin npm install babel-loader @babel/core @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties css-loader style-loader file-loader url-loader npm install react react-dom
目录结构
创建多页 React 应用的目录结构如下：
-- -------------------- ---- ------- --- ----- --- ---- - --- ------- - --- ----------- - - --- ------------ - - --- -------------- - - --- -------- - --- ------ - - --- ----------- - - - --- -------- - - - --- ---------- - - --- ------------- - - - --- -------- - - - --- ---------- - --- ------ - --- -------- --- ------------ --- -----------------
其中，src 目录是我们的源码目录，包含了多个页面的 .html 和 .js 文件。components 目录存放共用的组件，pages 目录存放各个页面的代码。App.js 和 index.js 分别是整个应用的入口文件。
配置 Webpack
完成上述工作后，我们需要配置 Webpack。我们需要为不同的页面配置不同的打包入口，在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------------- ----------------------------------
--------------- ------------------------------------
--
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- --------------------------------------------
--
--
-
----- ---------
---- ---------------- --------------
--
-
----- -------------------------
---- -
-
------- -------------
-------- -
------ -----
--
--
--
--
--
--
-------- -
--- -------------------
--------- ------------------------------------
--------- ------------------
------- ---------------
---
--- -------------------
--------- --------------------------------------
--------- --------------------
------- -----------------
---
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--在上述配置文件中，我们为不同的页面设置了不同的入口，同时使用了 HtmlWebpackPlugin 插件来自动生成 HTML 文件。这样就可以轻松地根据不同的页面生成单独的部署包了。
接下来，我们运行 webpack-dev-server 来启动本地服务器：
npx webpack-dev-server --mode development
通过访问 http://localhost:9000/music-list.html 和 http://localhost:9000/music-player.html，就可以看到我们刚刚创建的多页 React 应用了。
总结
本文介绍了如何使用 Webpack4 打包 React 多页应用。我们首先创建了一个简单的多页 React 应用，并进行了相应的依赖安装。接着，我们在 webpack.config.js 中进行了不同打包入口的配置，并使用了 HtmlWebpackPlugin 插件来自动生成 HTML 文件。最后，我们启动了本地服务器，成功运行了我们的多页应用。
现在，我们已经基本掌握了如何使用 Webpack4 打包 React 多页应用，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649ea74048841e9894b32a0c