Webpack5 多页面实践

特性维度 单页面应用( SPA 多页面统一目录(MPA) 多页面单独部署(MPA)
入口数量 单个,只有一个 HTML 文件 多个,多个 HTML 文件 多个,多个 HTML 文件,分别打包输出
资源输出结构 所有资源输出到统一目录(如 js/, css/ 所有页面的资源共用 js/, css/ 等目录 每页资源放在各自目录(如 index/js/, index/css/
公共资源复用 高:依赖打入主包或懒加载 chunk,资源完全共享 中:可通过 splitChunks 提取公共模块,多个页面共用依赖 低:默认每个页面依赖重复打包,需通过 CDN 或构建优化共享资源
首屏加载速度 中低:主包体积大需优化 高:每页只加载自身资源 高:每页打包独立、加载自身资源
项目推荐模式 用户交互复杂、状态集中、路由频繁 页面之间结构清晰、流程独立但资源共用 需要页面级灰度、子模块独立开发与部署

1. 示例多页面配置

  1. 配置外部依赖、CDN 资源以及页面级 CDN 扩展
  2. 自动生成入口和 HtmlWebpackPlugin 实例
  3. 导出生成的入口配置、插件配置、依赖过滤配置
  • entries:入口配置对象(用于 entry
  • plugins:HtmlWebpackPlugin 实例数组(用于 plugins
  • externals:供主配置使用(用于排除模块打包)

1.1 多页面统一目录(MPA)

bash 复制代码
dist/
├── test1.html
├── test2.html
├── js/
│   ├── test1.[hash].js
│   └── test2.[hash].js
└── 图片、字体等资源
js 复制代码
const path = require("path");
const glob = require("glob");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const resolve = (dir) => path.resolve(__dirname, "..", dir);

// 打包排除某些依赖
const externals = {
  vue: "Vue",
  vuex: "Vuex",
  "vue-router": "VueRouter",
  axios: "axios",
  vant: "vant",
};

// cdn资源
const assetsCDN = {
  // 开发环境
  dev: {
    css: ["//xxx/npm/vant@2.12/lib/index.css"],
    js: ["//xxx/npm/eruda@2.4/eruda.min.js"],
  },
  // 生产环境
  build: {
    css: ["//xxx/npm/vant@2.12/lib/index.css"],
    js: [
      "//xxx/npm/vue@2.6/dist/vue.min.js",
      "//xxx/npm/vuex@3.6/dist/vuex.min.js",
      "//xxx/npm/vue-router@3.5/dist/vue-router.min.js",
      "//xxx/npm/axios@0.21/dist/axios.min.js",
      "//xxx/npm/vant@2.12/lib/vant.min.js",
    ],
  },
};

const entryCDN = {
  test: {
    dev: merge(assetsCDN.dev, {
      css: [],
      js: ["//res.wx.qq.com/open/js/jweixin-1.6.0.js"],
    }),
    build: merge(assetsCDN.build, {
      css: [],
      js: ["//res.wx.qq.com/open/js/jweixin-1.6.0.js"],
    }),
  },
};

const getEntry = () => {
  // 多页面打包的入口集合
  const entries = {};
  // 多页面打包的模板集合
  const plugins = [];
  // 借助 glob 获取 src 目录下的所有入口文件
  const globPath = resolve("src/views/**/main.js");
  // 遍历文件集合,生成所需要的 entries、plugins 集合
  glob.sync(globPath).map((item) => {
    const match = item.match(/src/views/(.*)/main.js$/);
    const name = match?.[1];
    entries[name] = [item];
    // CDN配置
    const env = process.env.NODE_ENV === "production" ? "build" : "dev";
    const pageCDN = (entryCDN[name] && entryCDN[name][env]) || assetsCDN[env];
    if (!entryCDN[name]) {
      console.warn(`页面 ${name} 未配置 entryCDN,已使用默认配置`);
    }
    // 多页面所需要的模板集合
    plugins.push(
      new HtmlWebpackPlugin({
        title: "",
        filename: `${name}.html`,
        template: "public/index.html",
        favicon: "public/favicon.ico",
        chunks: [name],
        minify:
          process.env.NODE_ENV === "production"
            ? {
                //压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true, // 删除空白符和换行符
              }
            : false,
        cdn: process.env.NODE_ENV === "production" ? entryCDN[name].build : entryCDN[name].dev,
      })
    );
  });
  // 对外输出页面打包需要的 入口集合、依赖过滤
  return { entries, plugins, externals };
};

module.exports = getEntry();
js 复制代码
const { entries, plugins, externals } = require("./entry");

entry: {
  base: ["core-js/stable", "regenerator-runtime/runtime"],
  ...entries
}

1.2 多页面单独部署(MPA)

bash 复制代码
dist/
├── test1/
│   ├── index.html
│   └── js/
│       └── test1.[hash].js
└── test2/
    ├── index.html
    └── js/
        └── test2.[hash].js
js 复制代码
// 在多页面统一目录的基础上新增配置
const CopyWebpackPlugin = require("copy-webpack-plugin");

const getEntry = () => {
  // 多页面打包的入口集合
  const entries = {};
  // 多页面打包的模板集合
  const plugins = [];
  // 借助 glob 获取 src 目录下的所有入口文件
  const globPath = resolve("src/views/**/main.js");
  const base = ["core-js/stable", "regenerator-runtime/runtime"];
  // 遍历文件集合,生成所需要的 entries、plugins 集合
  glob.sync(globPath).map(item => {
    const match = item.match(/src/views/(.*)/main.js$/);
    const name = match?.[1];
    entries[name] = [...base, item];

    const env = process.env.NODE_ENV === "production" ? "build" : "dev";
    const pageCDN = (entryCDN[name] && entryCDN[name][env]) || assetsCDN[env];

    if (!entryCDN[name]) {
      console.warn(`页面 ${name} 未配置 entryCDN,已使用默认配置`);
    }

    // 多页面所需要的模板集合
    plugins.push(
      new HtmlWebpackPlugin({
        title: "",
        filename: `${name}/index.html`,
        template: "public/index.html",
        // favicon: "public/favicon.ico",
        chunks: [name],
        minify:
          process.env.NODE_ENV === "production"
            ? {
                //压缩HTML文件
                removeComments: true, // 移除HTML中的注释
                collapseWhitespace: true // 删除空白符和换行符
              }
            : false,
        cdn: pageCDN
      }),
      new CopyWebpackPlugin({
        patterns: [{ from: "public/favicon.ico", to: `${name}/favicon.ico` }]
      })
    );
  });

  // 对外输出页面打包需要的 入口集合、依赖过滤
  return { entries, plugins, externals };
};
js 复制代码
// 1. 注释掉 entry base 的配置
// 2. css、img、font的filename 增加 [name]/

splitChunks: false // ❌ 禁用公共拆包
相关推荐
绅士玖1 分钟前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子11 分钟前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang11 分钟前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课39 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在40 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵43 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius43 分钟前
Unity URP管线着色器库攻略part1
前端
Xy9101 小时前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala1 小时前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy1 小时前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js