多页面应用 MPA

约 784 字大约 3 分钟

2025-03-15

一、什么是多入口

在业务系统中，Webpack 的多入口配置可以用于多种场景，帮助优化代码组织、提升性能和满足复杂业务需求。

多页面应用是指一个系统包含多个独立的 HTML 页面，每个页面都有自己的入口文件。

比如：员工服务系统里我们可以拆分出 登录页面、超时页面、操作前台、管理后台。

在 Webpack 中构建多页应用可以进行以下配置：

entry: {
  page1: './src/page1.js',
  page2: './src/page2.js'
}

二、配置实例

以下是一个简单的 Webpack 多入口配置示例，适用于多页面应用（MPA）场景。每个入口文件对应一个独立的页面，Webpack 会为每个入口生成一个单独的 bundle 文件，并使用 html-webpack-plugin 生成对应的 HTML 文件。

总结

enty： 配置多个入口对应的文件入口
HtmlWebpackPlugin： 配置入口的输出模板、文件名、资源
output： 使用参数【name】，支持文件按照HtmlWebpackPlugin里的配置的名字导出

1、项目代码

1.1 项目结构

project/
├── src/
│   ├── home.js
│   ├── about.js
│   ├── home.html
│   ├── about.html
├── dist/
├── webpack.config.js
├── package.json

1.2 Webpack 配置文件（webpack.config.js）

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

module.exports = {
  // 多入口配置
  entry: {
    home: "./src/home.js", // 首页入口
    about: "./src/about.js", // 关于页入口
  },
  output: {
    filename: "[name].bundle.js", // 输出文件名，[name] 会被替换为入口名称
    path: path.resolve(__dirname, "dist"), // 输出目录
  },
  plugins: [
    // 为每个入口生成一个 HTML 文件
    new HtmlWebpackPlugin({
      template: "./src/home.html", // 首页模板
      filename: "home.html", // 输出文件名
      chunks: ["home"], // 只注入 home.js
    }),
    new HtmlWebpackPlugin({
      template: "./src/about.html", // 关于页模板
      filename: "about.html", // 输出文件名
      chunks: ["about"], // 只注入 about.js
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/, // 处理 CSS 文件
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i, // 处理图片文件
        type: "asset/resource",
      },
    ],
  },
  mode: "development", // 开发模式
};

1.3 入口文件示例

src/home.js

import "./home.css";
console.log("这是首页入口文件");

src/about.js

import "./about.css";
console.log("这是关于页入口文件");

1.4 HTML 模板示例

src/home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
  </head>
  <body>
    <h1>欢迎来到首页</h1>
  </body>
</html>

src/about.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关于页</title>
  </head>
  <body>
    <h1>关于我们</h1>
  </body>
</html>

2、运行 Webpack

2.1 安装依赖：

npm install webpack webpack-cli html-webpack-plugin style-loader css-loader --save-dev

2.2 运行 Webpack：

npx webpack

2.3 查看输出：

打包后的文件会生成在 dist/ 目录下。
打开 dist/home.html 和 dist/about.html 即可查看效果。

3、输出结果

dist/
├── home.bundle.js
├── about.bundle.js
├── home.html
├── about.html

home.bundle.js 和 about.bundle.js 是分别从 home.js 和 about.js 打包生成的 bundle 文件。
home.html 和 about.html 是生成的 HTML 文件，分别注入了对应的 bundle 文件。

三、总结

通过 Webpack 的多入口配置，可以为每个页面生成独立的 bundle 文件，并结合 html-webpack-plugin 生成对应的 HTML 文件。这种方式非常适合多页面应用（MPA）场景，能够有效管理多个页面的资源加载和依赖关系。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24