使用webpack构建多页应用：适用于复杂项目的高级配置

# 1. 引言

## 1.1 多页应用与单页应用的区别

多页应用（MPA）和单页应用（SPA）是两种常见的前端架构模式。在多页应用中，每个页面都是一个独立的HTML文件，页面跳转时会重新加载整个页面。而单页应用则只有一个HTML文件，通过JavaScript动态地加载页面内容，实现无刷新的页面切换。

多页应用适用于内容较多、功能较复杂的项目，每个页面独立管理，结构清晰，利于SEO优化。而单页应用则适用于交互较为复杂、用户体验要求较高的项目，通过前端路由控制页面内容。

## 1.2 Webpack在多页应用中的应用价值

Webpack是前端开发中最常用的模块打包工具，主要功能包括代码合并、压缩、ES6转换、资源打包等。在多页应用中，Webpack的应用价值更加凸显。

使用Webpack可以帮助我们更好地管理多个页面之间的公共资源，如公共样式、公共脚本等，提高代码复用性和开发效率。同时，Webpack还可以通过代码拆分和按需加载，实现多页面间的快速切换和提升页面加载速度。

## 1.3 为何需要高级配置

在实际的多页应用开发中，简单的Webpack配置已经无法满足需求。需要进行高级配置来应对项目的复杂性和灵活性。

高级配置可以帮助我们实现代码的拆分和优化，提高页面的加载速度和性能。同时，高级配置也可以解决多页应用中的一些常见问题，如多个页面共享状态、公共组件的使用等。

接下来，我们将介绍如何进行多页应用的配置，并详细讲解高级配置的应用。

# 2. 准备工作

### 2.1 确定多页应用的需求

在开始配置多页应用之前，我们首先需要明确多页应用的具体需求是什么。一般来说，多页应用适用于那些页面逻辑相对独立，功能模块较为复杂的项目。例如企业官网、电商网站等。

对于这类项目，通常会存在多个页面，每个页面之间具有一定的页面跳转逻辑，同时也可能存在一些共享的模块和资源。因此，我们需要修改Webpack的基本配置，以满足多页应用的需求。

### 2.2 安装Webpack及相关插件

在开始配置多页应用之前，我们需要先安装Webpack及相关插件。通过NPM或者Yarn来完成安装，具体命令如下：

npm install webpack webpack-cli html-webpack-plugin --save-dev

或者

yarn add webpack webpack-cli html-webpack-plugin --dev

这里我们安装了Webpack本身以及html-webpack-plugin插件。Webpack用于构建项目，而html-webpack-plugin插件用于生成多个HTML文件。

### 2.3 配置项目文件结构

在开始配置多页应用之前，我们还需要合理地组织项目的文件结构。一般来说，我们可以按照页面的功能分别创建不同的目录，并在每个目录下创建对应的HTML、CSS、JS等文件。

以一个店铺管理系统为例，我们可以创建三个页面：登录页面、商品管理页面和订单管理页面。针对这个例子，我们可以按照以下的文件结构进行组织：

src
├── assets
│   ├── css
│   │   ├── login.css
│   │   ├── goods.css
│   │   ├── order.css
│   ├── js
│   │   ├── login.js
│   │   ├── goods.js
│   │   ├── order.js
├── pages
│   ├── login
│   │   ├── index.html
│   ├── goods
│   │   ├── index.html
│   ├── order
│   │   ├── index.html
├── index.html

在这个文件结构中，`src/assets`目录用于存放页面所需的共享资源，例如CSS和JS文件。`src/pages`目录则用于存放每个页面独有的资源，例如HTML文件和与之相关的CSS和JS文件。`src/index.html`则是整个多页应用的入口文件。

接下来，我们将在第三章节中配置多页应用的Webpack配置。

# 3. 多页应用项目配置

在多页应用项目配置中，我们需要进行一些特殊的配置以确保每个页面都能正确地被Webpack打包和构建。

## 3.1 单入口与多入口配置的区别

单入口配置指的是使用一个入口文件作为项目的默认入口。在多页应用中，我们需要为每个页面添加一个独立的入口文件，以便Webpack可以为每个页面生成独立的打包文件。

下面是单入口配置的示例：

entry: {
  main: './src/main.js'
},

而多入口配置则需要为每个页面都添加一个入口文件, 示例代码如下：

entry: {
  page1: './src/page1.js',
  page2: './src/page2.js',
  page3: './src/page