欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Webpack5 多頁面的項目實踐

 更新時間：2025年07月11日 11:13:19   作者：藍精靈001  
本文主要介紹了Webpack5 多頁面的項目實踐,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
特性維度單頁面應用-SPA多頁面統(tǒng)一目錄-MPA多頁面單獨部署-MPA
入口數量單個，只有一個 HTML 文件多個，多個 HTML 文件多個，多個 HTML 文件，分別打包輸出
資源輸出結構所有資源輸出到統(tǒng)一目錄（如 js/, css/）所有頁面的資源共用 js/, css/ 等目錄每頁資源放在各自目錄（如 index/js/, index/css/）
公共資源復用高：依賴打入主包或懶加載 chunk，資源完全共享中：可通過 splitChunks 提取公共模塊，多個頁面共用依賴低：默認每個頁面依賴重復打包，需通過 CDN 或構建優(yōu)化共享資源
首屏加載速度中低：主包體積大需優(yōu)化高：每頁只加載自身資源高：每頁打包獨立、加載自身資源
項目推薦模式用戶交互復雜、狀態(tài)集中、路由頻繁頁面之間結構清晰、流程獨立但資源共用需要頁面級灰度、子模塊獨立開發(fā)與部署

1. 示例多頁面配置

  1. 配置外部依賴、CDN 資源以及頁面級 CDN 擴展
  2. 自動生成入口和 HtmlWebpackPlugin 實例
  3. 導出生成的入口配置、插件配置、依賴過濾配置
  • entries：入口配置對象（用于 entry）
  • plugins：HtmlWebpackPlugin 實例數組（用于 plugins）
  • externals：供主配置使用（用于排除模塊打包）

1.1多頁面統(tǒng)一目錄（MPA）

dist/
├── test1.html
├── test2.html
├── js/
│   ├── test1.[hash].js
│   └── test2.[hash].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 = {
  // 開發(fā)環(huán)境
  dev: {
    css: ["http://xxx/npm/vant@2.12/lib/index.css"],
    js: ["http://xxx/npm/eruda@2.4/eruda.min.js"],
  },
  // 生產環(huán)境
  build: {
    css: ["http://xxx/npm/vant@2.12/lib/index.css"],
    js: [
      "http://xxx/npm/vue@2.6/dist/vue.min.js",
      "http://xxx/npm/vuex@3.6/dist/vuex.min.js",
      "http://xxx/npm/vue-router@3.5/dist/vue-router.min.js",
      "http://xxx/npm/axios@0.21/dist/axios.min.js",
      "http://xxx/npm/vant@2.12/lib/vant.min.js",
    ],
  },
};
 
const entryCDN = {
  test: {
    dev: merge(assetsCDN.dev, {
      css: [],
      js: ["http://res.wx.qq.com/open/js/jweixin-1.6.0.js"],
    }),
    build: merge(assetsCDN.build, {
      css: [],
      js: ["http://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();
const { entries, plugins, externals } = require("./entry");
 
entry: {
  base: ["core-js/stable", "regenerator-runtime/runtime"],
  ...entries
}

1.2多頁面單獨部署（MPA）

dist/
├── test1/
│   ├── index.html
│   └── js/
│       └── test1.[hash].js
└── test2/
    ├── index.html
    └── js/
        └── test2.[hash].js
// 在多頁面統(tǒng)一目錄的基礎上新增配置
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 };
};
// 1. 注釋掉 entry base 的配置
// 2. css、img、font的filename 增加 [name]/
 
splitChunks: false // ? 禁用公共拆包

到此這篇關于Webpack5 多頁面的項目實踐的文章就介紹到這了,更多相關Webpack5 多頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論