随着前端开发技术的发展，现在越来越多的项目采用单页应用（SPA）的形式进行开发。但是在某些场景下，多页应用仍然是最佳选择，比如产品官网等。而 Webpack 作为一款流行的打包工具，也可以用于打包多页应用。本文将介绍如何使用 Webpack 打包多页应用，并给出详细的步骤和示例代码。
前置知识
在阅读本文之前，你需要熟悉 Webpack 的基本概念和配置，了解 HTML、CSS 和 JavaScript 的基础知识。
步骤一：创建多个入口文件
首先，我们需要为每个页面创建一个对应的入口文件。在这里，我们以一个简单的公司官网为例，页面结构如下：
/index.html
/about.html
/contact.html
/assets
/css
/styles.css
/js
/main.js在这个项目中，我们有三个页面：首页（index.html）、关于我们（about.html）和联系我们（contact.html）。我们可以在项目根目录下创建三个入口文件：
/src /index.js /about.js /contact.js
在这里，我们可以将 index.js、about.js 和 contact.js 分别作为三个入口文件。我们可以将这些入口文件打包为对应的 HTML 页面。
步骤二：配置 Webpack
接下来，我们需要配置 Webpack 来处理多个入口文件。在 Webpack 配置文件中，我们需要配置多个入口文件和输出文件，示例代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
------ -----------------
------ -----------------
-------- ------------------
--
------- -
----- ----------------------- --------
--------- -----------
-
--在这个配置文件中，我们首先需要使用 require 导入 Node.js 的 path 模块，以便在输出文件时使用绝对路径。然后，在 entry 中，我们为每个页面配置对应的入口文件。这里，我们将入口文件名作为对象的属性名，以方便输出文件的命名。在 output 中，我们设置输出路径为 dist 目录，并使用 [name].js 作为输出文件名，其中 [name] 会自动替换为每个入口文件的名字。
步骤三：处理 HTML 文件
在多页应用中，每个 HTML 页面都需要引入对应的 JavaScript 文件。为了自动化处理这个过程，在 Webpack 中，我们可以使用 html-webpack-plugin 插件。这个插件可以自动将 JS 文件引入到 HTML 文件中，生成最终的 HTML 文件。
安装 html-webpack-plugin：
npm install html-webpack-plugin --save-dev
配置 html-webpack-plugin：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
-- -------- - ------ --
-------- -
--- -------------------
--------- -------------
--------- ---------------
------- ---------
---
--- -------------------
--------- -------------
--------- ---------------
------- ---------
---
--- -------------------
--------- ---------------
--------- -----------------
------- -----------
--
-
--在这个配置文件中，我们首先使用 require 导入 html-webpack-plugin 插件。然后，在 plugins 中，我们添加了三个插件实例，并分别配置了对应的 HTML 文件名、模板文件和要引入的 JS 文件（也就是每个入口文件）。这样，当 Webpack 运行时，html-webpack-plugin 会根据配置文件自动生成 HTML 文件，并将对应的 JavaScript 文件引入到 HTML 中。
步骤四：处理 CSS 文件
在多页应用中，每个页面都有对应的 CSS 样式。为了处理 CSS 样式文件，在 Webpack 中，我们可以使用 style-loader 和 css-loader。
安装 style-loader 和 css-loader：
npm install style-loader css-loader --save-dev
配置 style-loader 和 css-loader：
-- -------------------- ---- -------
-------------- - -
-- --------------- - ------- --
------- -
------ -
-
----- ---------
---- ---------------- -------------
-
-
-
--在这个配置文件中，我们在 module 配置中添加了一个 rules 规则，用于处理 .css 文件。在这个规则中，我们使用 test 属性来匹配所有 .css 文件，并使用 use 属性来处理这些文件。在 use 属性中，我们使用了 style-loader 和 css-loader 来处理 CSS 文件。其中，css-loader 用于加载和解析 CSS 文件，将其转换为 JavaScript 对象，而 style-loader 则将这些样式插入到 HTML 的 <head> 中。当 Webpack 运行时，就会自动处理对应的 CSS 样式文件。
步骤五：测试打包结果
现在，我们已经完成了 Webpack 配置的所有步骤。在运行 Webpack 之前，我们需要在 index.html、about.html 和 contact.html 中分别引入对应的 CSS 文件。比如，在 index.html 中，我们可以添加以下代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------- ----- ---------------- ------------------------------- ------- ------ --------------- ---------------- ------- -------------------------- ------- -------
然后，我们可以使用以下命令来运行 Webpack 并生成最终的 HTML、CSS 和 JavaScript 文件：
npx webpack
如果一切顺利，Webpack 将会自动生成 dist 文件夹，并在其中生成对应的 HTML、CSS 和 JavaScript 文件。可以在浏览器中打开这些 HTML 文件，以查看打包结果。
总结
本文介绍了如何使用 Webpack 打包多页应用，并给出详细的步骤和示例代码。多页应用是一种非常常见的应用类型，它可以帮助开发者更好地组织代码和跟踪页面的变化。通过本文，读者可以更好地了解如何使用 Webpack 处理多页应用，并将其应用于自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520f20795b1f8cacd863592