Webpack 5 学习 11：巧用多页面打包方案，打造高效开发流程！

2024-02-03 01:45:14

多页面应用（MPA）是构建复杂前端项目时常用的架构模式。在这种模式下，每个页面都有自己的入口文件和模板 HTML 文件。当我们使用 Webpack 构建 MPA 项目时，我们需要分别为每个页面配置入口文件和 HTML 插件。这种做法很繁琐，尤其是当项目中的页面数量较多时。

Webpack 5 提供了多页面打包方案，可以帮助我们自动识别入口文件和模板 HTML，并动态配置。这极大地简化了 MPA 项目的构建流程，提高了开发效率。

多页面打包原理

Webpack 多页面打包方案的基本原理是，它会扫描项目的目录结构，自动识别入口文件和模板 HTML 文件。然后，它会根据这些文件动态生成一个 Webpack 配置对象。这个配置对象包含了所有页面的入口文件、模板 HTML 文件以及其他必要的配置项。

配置多页面打包

在项目中使用 Webpack 多页面打包方案，我们需要在 Webpack 配置文件中进行一些简单的配置。具体来说，我们需要做以下几件事：

安装 webpack-multi-page 插件。
在 Webpack 配置文件中，配置 entry 和 plugins 字段。
在 entry 字段中，指定入口文件。
在 plugins 字段中，添加 HtmlWebpackPlugin 插件。

代码示例

下面是一个使用 Webpack 5 多页面打包方案的代码示例：

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

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