配置多页面应用（MPA）- 使用 Webpack 处理多个入口和出口

多页面应用（MPA）是指一个网站包含多个页面，每个页面之间有独立的 HTML、CSS 和 JavaScript 文件。在开发中，我们常常需要为每个页面配置不同的入口和出口，同时使用 HtmlWebpackPlugin 简化生成 HTML 文件的过程。本文将介绍如何使用 Webpack 配置多页面应用。

配置多个入口和出口

在 Webpack 中，可以通过配置多个入口和出口来构建多页面应用。每个入口对应一个页面，每个出口对应生成的页面文件。以下是一个简单的多页面应用配置示例：

const path = require('path');

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

在上面的配置中，我们定义了两个入口page1 和page2，分别对应src/page1.js 和src/page2.js 文件。出口配置使用了[name] 占位符，它会根据入口的键名生成相应的出口文件名。

使用 HtmlWebpackPlugin

HtmlWebpackPlugin 是一个 Webpack 插件，可以帮助我们生成 HTML 文件并自动引入打包后的 JavaScript 文件。对于多页面应用，我们可以为每个页面生成对应的 HTML 文件。以下是如何配置 HtmlWebpackPlugin：

首先，安装 HtmlWebpackPlugin：

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

然后，在 Webpack 配置中引入并配置 HtmlWebpackPlugin：

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

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/page1.html', // 指定 HTML 模板
      filename: 'page1.html', // 生成的 HTML 文件名
      chunks: ['page1'], // 引入的 JavaScript 文件，对应入口的键名
    }),
    new HtmlWebpackPlugin({
      template: './src/page2.html',
      filename: 'page2.html',
      chunks: ['page2'],
    }),
  ],
};

在上面的配置中，我们为每个页面配置了一个 HtmlWebpackPlugin 实例，通过template 指定 HTML 模板文件，filename 指定生成的 HTML 文件名，chunks 指定引入的 JavaScript 文件（对应入口的键名）。

通过以上配置，Webpack 将会自动为每个页面生成对应的 HTML 文件，并自动引入打包后的 JavaScript 文件。

总结

配置多页面应用需要为每个页面配置不同的入口和出口，同时使用 HtmlWebpackPlugin 插件生成对应的 HTML 文件。通过合理的配置，我们可以方便地构建多页面应用，并提高开发效率。