在前端开发中，我们经常会遇到需要开发多个页面的情况。这时候，使用单页应用可能会显得过于臃肿，而使用多页应用则更加合适。本文将介绍如何使用 Webpack 配置多页应用。
什么是多页应用？
多页应用是指一个网站由多个 HTML 页面组成，每个页面都有自己的 URL 地址。这种应用方式与单页应用不同，单页应用只有一个 HTML 页面，通过 JavaScript 控制页面内容的切换。
多页应用有以下优点：
- 每个页面都有自己的 URL 地址，更符合搜索引擎的爬虫规则，SEO 更友好；
- 页面之间的切换更加自然，用户体验更好；
- 可以更容易地对每个页面进行独立的开发和维护。
Webpack 配置多页应用
Webpack 是一个强大的打包工具，可以用于打包多页应用。下面是使用 Webpack 配置多页应用的步骤：
1. 创建项目文件夹
首先，创建一个项目文件夹，并在其中创建以下目录结构：
├── src │ ├── page1 │ │ ├── index.html │ │ ├── index.js │ ├── page2 │ │ ├── index.html │ │ ├── index.js ├── dist
其中，src 目录用于存放源代码，dist 目录用于存放打包后的代码。
2. 配置 Webpack
在项目文件夹下，创建一个 webpack.config.js 文件，用于配置 Webpack。以下是一个简单的配置示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -
------ -----------------------
------ ----------------------
--
------- -
----- ----------------------- --------
--------- ------------------
--
-------- -
--- -------------------
--------- -------------------------
--------- -------------
------- ---------
---
--- -------------------
--------- -------------------------
--------- -------------
------- ---------
--
-
--在这个配置中，我们先引入了 path 和 HtmlWebpackPlugin 两个模块。其中，path 用于处理文件路径，HtmlWebpackPlugin 用于生成 HTML 文件。
然后，我们配置了 entry 和 output，分别表示入口文件和输出文件的路径。entry 中包含了两个入口文件，分别对应两个页面。output 中的 [name] 表示动态获取入口文件的名称，[hash] 表示打包后的文件名加上 hash 值，用于防止缓存。
最后，我们配置了 HtmlWebpackPlugin，用于生成 HTML 文件。其中，template 表示 HTML 文件的模板路径，filename 表示生成的 HTML 文件名，chunks 表示该 HTML 文件需要包含哪些 JavaScript 文件。
3. 编写源代码
在 src 目录下，我们分别创建了两个页面，每个页面都有自己的 HTML 和 JavaScript 文件。以下是一个简单的示例：
page1/index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- --------- ------- ------ ---- --------------- ------- -------
page1/index.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});page2/index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------- --------- ------- ------ ---- --------------- ------- -------
page2/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);4. 打包代码
在命令行中，进入项目文件夹，执行以下命令：
npm install npm run build
这时候，Webpack 会自动打包代码，并将打包后的文件存放在 dist 目录下。
5. 查看效果
在浏览器中打开 dist 目录下的 page1.html 和 page2.html 文件，即可查看效果。
结论
使用 Webpack 配置多页应用，可以更方便地开发和维护多个页面。在配置过程中，需要注意 entry、output 和 HtmlWebpackPlugin 的配置，以及源代码的组织方式。本文提供的示例代码可以作为参考，读者可以根据自己的需求进行修改和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6744a655c1a23897ea7c2763