在 Web 开发中，多页面应用（Multi-Page Application）是一种常见的开发方式，对于这种类型的应用，Webpack 提供了一些解决方案。本文将详细介绍 Webpack 如何处理多页面应用。
什么是多页面应用？
多页面应用（MPA）是指一个网站包含多个 HTML 页面，每个页面可以看作是一个独立的应用。相对于单页面应用（SPA）来说，MPA 更适合于复杂的应用场景，例如企业门户网站、电商网站等。
需要解决的问题
在开发 MPA 时，我们需要解决以下几个问题：
- 如何自动引入页面相关的 CSS 和 JS 文件？
- 如何处理 HTML 文件之间的共用代码？
- 如何避免大量重复代码？
下面我们将介绍如何使用 Webpack 解决以上问题。
目录结构
在开始之前，我们需要了解一下 MPA 的目录结构。以一个简单的企业门户网站为例，目录结构如下：
-- -------------------- ---- ------- - --- --- - --- ----- - - --- ---------- - - --- ---------- - - --- -------- - --- ------- - - --- ---------- - - --- ---------- - - --- -------- - --- -------- - - --- ---------- - - --- ---------- - - --- -------- - --- ---------- - --- --------- --- ---- --- ----------------- --- ------------
src 目录下是各个页面相关的文件，common.css 和 common.js 是所有页面都用到的公共代码。dist 目录是打包生成的目标文件夹。
步骤
安装依赖
我们需要安装以下依赖：
npm install webpack webpack-cli html-webpack-plugin mini-css-extract-plugin
- webpack 和 webpack-cli：Webpack 核心依赖。
- html-webpack-plugin：自动生成 HTML 文件，并自动引入相关资源。
- mini-css-extract-plugin：将 CSS 提取到单独的文件中。
配置 webpack.config.js
我们需要一个 webpack 配置文件来处理多页面应用。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -
------ -----------------------
-------- -------------------------
--------- --------------------------
------- ------------------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- -------------------------
--------- -------------
------- --------- ----------
---
--- -------------------
--------- ---------------------------
--------- ---------------
------- ----------- ----------
---
--- -------------------
--------- ----------------------------
--------- ----------------
------- ------------ ----------
---
--- ----------------------
--------- ---------------------------
---
--
------- -
------ -
-
----- ----------
---- ----------------------------- ------------- ---------------
--
--
--
--这个配置文件做了以下几个事情：
- 指定了入口文件和出口文件。
- 使用了 HtmlWebpackPlugin 自动生成 HTML 文件。
- 使用了 MiniCssExtractPlugin 提取 CSS 到单独的文件中。
- 使用了 module.rules 中的规则来处理 CSS 文件。
entry 中每个键值对分别对应一个页面，其中 common.js 是所有页面都用到的公共代码。
HtmlWebpackPlugin 中的 template 指定了模板 HTML 文件，chunks 指定了该页面需要引入的 JS 文件。这样就可以自动引入页面相关的 JS 文件了。
多页面应用的 CSS 处理
对于 CSS 文件，我们可以使用 MiniCssExtractPlugin 来提取出每个页面对应的 CSS 文件。这样可以避免在每个页面中都引入所有 CSS。
处理 HTML 文件之间的共用代码
如果多个 HTML 文件中引用了同样的代码（例如公共的 JS 文件），我们可以将这些代码打包到一个单独的 JS 文件中，然后在每个 HTML 文件中引用这个文件。
在上面的例子中，我们已经使用了 common.js 文件来处理这个问题了。
优化
在 MPA 中，我们需要避免大量重复代码的出现。以下是一些优化建议：
- 使用公共的代码和库（例如 React、Vue 等）。
- 使用 Webpack 的 splitChunks 功能来抽取公共的代码。
- 使用 Code Splitting 技术，将页面中的代码按需加载。
总结
在本文中，我们详细介绍了使用 Webpack 处理多页面应用的方法。通过本文的学习，你应该能够熟练使用 Webpack 来处理 MPA，并能够采取一些优化措施来提高页面性能。
示例代码：https://github.com/cybershota/multi-page-webpack-example
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64929e2b48841e9894068338