webpack5中的多页面应用(MPA)实践指南

# 1. 简介

## 1.1 webpack5简介

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在 webpack 处理应用程序时，它会递归构建一个依赖图(dependency graph)，其中包含应用程序需要的每个模块，然后生成一个或多个 bundle。

Webpack 5 是 webpack 的最新版本，提供了许多全新的特性和改进，如持久缓存(persistent cache)、更好的性能、更好的 Tree Shaking 策略等。

## 1.2 多页面应用(MPA)概述

多页面应用(MPA)是指一个网站包含多个页面，每个页面之间通过链接进行跳转。每个页面都是一个独立的 HTML 文件，独立加载各自的 CSS、JS 等资源。

## 1.3 MPA与SPA的区别与优势

与单页面应用(SPA)相比，多页面应用(MPA)不需要像SPA那样处理路由、状态管理等问题，每个页面都可以独立加载，有利于 SEO 优化，适用于一些传统的 Web 应用。然而，MPA 的缺点在于开发维护成本高，难以实现前端路由、组件复用等问题。
## webpack5基础配置

webpack是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会从入口起点开始，递归地构建出一个依赖图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

### 2.1 安装webpack5及相关依赖

首先，我们需要安装webpack和webpack-cli作为开发依赖：

npm install webpack webpack-cli --save-dev

### 2.2 entry与output配置

在webpack中，entry是指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。默认值是`./src/index.js`，但你可以通过在webpack配置中配置entry属性来指定一个（或多个）其它的入口起点。output属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。主要是通过filename和path这两个属性来配置。

// webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

### 2.3 多页面入口配置

对于多页面应用，我们需要指定每个页面的入口文件，这样webpack才能正确地构建多个页面。可以通过对象的方式配置entry，为每个页面指定一个入口文件。

// webpack.config.js

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  // other configurations...
};

### 2.4 HTMLWebpackPlugin配置

HTMLWebpackPlugin是一个用来自动生成html文件的插件。在多页面应用中，可以为每个页面生成对应的html文件，并指定对应的入口文件。

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
    contact: './src/contact.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'home.html',
      template: 'src/home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: 'src/about.html',
      chunks: ['about']
    }),
    new HtmlWebpackPlugin({
      filename: 'contact.html',
      template: 'src/contact.html',
      chunks: ['contact'