Webpack 是一款常用的前端打包工具，可以将多个文件打包成一个文件并处理依赖关系。在开发多页应用时，Webpack 的配置有些不同于单页应用。本文将介绍如何配置 Webpack 来构建多页应用。
多页应用的概念
多页应用是指由多个 HTML 页面组成的应用。每个页面都有自己的 JavaScript 和 CSS 文件，需要独立打包。在多页应用中，每个页面都可以看做是一个独立的单页应用，它们之间的链接可以通过 HTML 超链接或 JavaScript 实现。
多页应用的优缺点
多页应用的优点是：
- 更好的 SEO：每个页面都可以被搜索引擎收录，提高了网站被搜索引擎发现和收录的概率。
- 更好的性能：每个页面只加载必要的资源，不需要加载所有的脚本和样式。
- 更好的可维护性：每个页面都可以独立开发和维护，降低了项目的复杂性。
多页应用的缺点是：
- 需要编写多个 HTML 页面，增加了开发成本。
- 页面之间的切换需要重新加载整个页面，比单页应用慢。
Webpack 多页应用的配置
目录结构
在开始配置之前，需要了解多页应用的目录结构。一般的目录结构如下：
-- -------------------- ---- ------- --- --- - --- ----- - - --- -------- - - --- ---------- - - --- --------- - --- ----- - - --- -------- - - --- ---------- - - --- --------- - --- ------ - --- --------- - --- --------- --- ---- - --- ---------- - --- --------------- - --- ---------------- - --- ---------- - --- --------------- - --- ---------------- - --- ---------------- - --- ---------------- --- -----------------
在 src 目录下的 index 和 about 目录中，分别包含了每个页面所需要的 JavaScript、HTML 和 CSS 文件。common 目录中则包含了公共的 JavaScript 文件。
在 dist 目录下，每个页面的 HTML 和 CSS 文件都在该页面对应的 bundle 文件中引用。公共的 JavaScript 文件则在 header 和 footer bundle 文件中引用。
配置入口
在 Webpack 的 entry 配置中，需要指定多个入口文件。在多页应用中，每个页面都需要有自己的入口文件。可以通过以下配置来实现：
module.exports = {
entry: {
index: './src/index/index.js',
about: './src/about/about.js',
header: './src/common/header.js',
footer: './src/common/footer.js',
},
};配置输出
在 output 配置中，需要对每个页面输出对应的 HTML、CSS 和 JavaScript 文件。可以使用 html-webpack-plugin 插件来实现：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------- -
----- ----------------------- --------
--------- -------------------
--
-------- -
--- -------------------
--------- -------------------------
--------- -------------
------- ---------- -------- ----------
---
--- -------------------
--------- -------------------------
--------- -------------
------- ---------- -------- ----------
---
--
--在使用 html-webpack-plugin 插件配置中，需要指定每个页面使用的模板文件，生成的文件名，以及需要引用的 JavaScript 文件 chunk。
配置加载器
在多页应用中，需要对每个页面的 CSS 文件进行独立打包处理。可以通过 mini-css-extract-plugin 插件来实现：
-- -------------------- ---- -------
----- -------------------- - -----------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- ----------------------------- --------------
--
--
--
-------- -
--- ----------------------
--------- --------------------
-------------- -----------
---
--
--配置公共模块
在多页应用中，需要将公共模块提取出来，避免每个页面都单独加载一份公共模块。可以使用 optimization.splitChunks 配置来实现：
-- -------------------- ---- -------
-------------- - -
------------- -
------------ -
------------ -
------- -
----- -------------------
----- ---------
------- ------
--
--
--
--
--在 optimization.splitChunks 配置中，使用 cacheGroups 配置将公共模块提取到一个 common chunk 中。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
------- -------------------------
------- -------------------------
--
------- -
----- ----------------------- --------
--------- -------------------
--
------- -
------ -
-
----- ---------
---- ----------------------------- --------------
--
--
--
-------- -
--- -------------------
--------- -------------------------
--------- -------------
------- ---------- -------- ----------
---
--- -------------------
--------- -------------------------
--------- -------------
------- ---------- -------- ----------
---
--- ----------------------
--------- --------------------
-------------- -----------
---
--
------------- -
------------ -
------------ -
------- -
----- -------------------
----- ---------
------- ------
--
--
--
--
--结论
通过本文的介绍，读者可以了解到如何配置 Webpack 来构建多页应用。在开发多页应用时，需要对每个页面的 HTML、CSS 和 JavaScript 文件进行独立打包处理，并将公共模块提取出来，避免重复加载。更深入地了解 Webpack 的使用可以使开发效率更高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710b9c8ad1e889fe2fbb003