彻底搞懂 Module Federation（中中）：MF 模块加载（上）

不可能的是2026-03-11 9:54

本文是《彻底搞懂 Module Federation》系列的第3篇，分析 Module Federation 模块加载的源码对照。

📚 系列文章

  • 📖 第1篇：概述与实战示例
  • 📖 第2篇：原理分析 - Webpack 异步加载流程
  • ✅ 第3篇（本文）：原理分析 - MF 模块加载（上）
  • 📖 第4篇：原理分析 - MF 模块加载（下）
  • 📖 第5篇：原理分析 - Runtime API + 项目实操

3.2 Module Federation模块加载流程

module federation加载流程跟异步加载主流程保持不变，额外引入了remote、resumes处理方法，所以需要先看完webpack按需加载到流程

3.2.1 概述

Module Federation 加载跟按需加载最大的区别是它需要处理共享模块和共享依赖，

如何进行依赖前置是很大的问题。

还是用前面的vue3-demo示例，现在设置上ModuleFederationPlugin插件，主要看Layout目录下的文件，从消费者角度看模块加载流程，入口文件还是src/index.js

scss 复制代码 
vue3-demo/
├── layout（host）
│   ├── src
│   │   ├── Layout.vue     -- 使用业务组件Content，
│   │   ├── index.js       -- import('./main.js');
│   │   └── main.js        -- const Content = defineAsyncComponent(() => import('home/Content'));
│   └── webpack.config.js   -- remotes:{home: 'home@http://home.com/remoteEntry.js'}
└── package.json

3.2.2 初始化请求链路

从请求链路入口js后面多了remoteEntry，提前加载了共享组件Content、Button

3.2.3 源码与构建后代码对照

3.2.3.1 入口html文件

3.2.3.1.1 源码
bash 复制代码 
<div id="app"></div>
3.2.3.1.2 构建后代码
xml 复制代码 
<head><script defer src="main.js"></script></head><div id="app"></div>

3.2.3.2 入口index.js文件

3.2.3.2.1 源码
vbnet 复制代码 
// https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption
import('./main.js');
3.2.3.2.2 构建后代码

构建后的startUp 入口函数

less 复制代码 
/******/ (() => { // webpackBootstrap
/******/  var __webpack_modules__ = ({
  
  /***/ "./src/index.js":
  /*!**********************!*\
    !*** ./src/index.js ***!
    **********************/
  /***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {
  
  // https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption
  __webpack_require__.e(/*! import() */ "src_main_js").then(__webpack_require__.bind(__webpack_require__, /*! ./main.js */ "./src/main.js"));
  
  
  /***/ }),
  
  /***/ "webpack/container/reference/home":
  /*!************************************************************!*\
    !*** external "home@http://localhost:3002/remoteEntry.js" ***!
    ************************************************************/
  /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
  
  "use strict";
  var __webpack_error__ = new Error();
  module.exports = new Promise((resolve, reject) => {
    if(typeof home !== "undefined") return resolve();
    __webpack_require__.l("http://localhost:3002/remoteEntry.js", (event) => {
      if(typeof home !== "undefined") return resolve();
      var errorType = event && (event.type === 'load' ? 'missing' : event.type);
      var realSrc = event && event.target && event.target.src;
      __webpack_error__.message = 'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
      __webpack_error__.name = 'ScriptExternalLoadError';
      __webpack_error__.type = errorType;
      __webpack_error__.request = realSrc;
      reject(__webpack_error__);
    }, "home");
  }).then(() => (home));
  
  /***/ })
  
  /******/  });
  /************************************************************************/
  /******/  // The module cache
  /******/  var __webpack_module_cache__ = {};
  /******/  
  /******/  // The require function
  /******/  function __webpack_require__(moduleId) {
  /******/    // Check if module is in cache
  /******/    var cachedModule = __webpack_module_cache__[moduleId];
  /******/    if (cachedModule !== undefined) {
  /******/      return cachedModule.exports;
  /******/    }
  /******/    // Create a new module (and put it into the cache)
  /******/    var module = __webpack_module_cache__[moduleId] = {
  /******/      id: moduleId,
  /******/      // no module.loaded needed
  /******/      exports: {}
  /******/    };
  /******/  
  /******/    // Execute the module function
  /******/    var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
  /******/    __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
  /******/    module = execOptions.module;
  /******/    execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
  /******/  
  /******/    // Return the exports of the module
  /******/    return module.exports;
  /******/  }
  /******/  
  /******/  // expose the modules object (__webpack_modules__)
  /******/  __webpack_require__.m = __webpack_modules__;
  /******/  
  /******/  // expose the module cache
  /******/  __webpack_require__.c = __webpack_module_cache__;
  /******/  
  /******/  // expose the module execution interceptor
  /******/  __webpack_require__.i = [];
  /******/  

  /******/  

  /******/  

  /******/  
  /******/  /* webpack/runtime/ensure chunk */
  /******/  (() => {
  /******/    __webpack_require__.f = {};
  /******/    // This file contains only the entry chunk.
  /******/    // The chunk loading function for additional chunks
  /******/    __webpack_require__.e = (chunkId) => {
  /******/      return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
  /******/        __webpack_require__.f[key](chunkId, promises);
  /******/        return promises;
  /******/      }, []));
  /******/    };
  /******/  })();
  /******/  
  /******/  

  /******/  
  /******/  /* webpack/runtime/get mini-css chunk filename */
  /******/  (() => {
  /******/    // This function allow to reference async chunks
  /******/    __webpack_require__.miniCssF = (chunkId) => {
  /******/      // return url for filenames based on template
  /******/      return "" + chunkId + ".css";
  /******/    };
  /******/  })();

  /******/  
  /******/  /* webpack/runtime/remotes loading */
  /******/  (() => {
  /******/    var chunkMapping = {
  /******/      "webpack_container_remote_home_Content": [  /******/        "webpack/container/remote/home/Content"  /******/      ],
  /******/      "webpack_container_remote_home_Button": [  /******/        "webpack/container/remote/home/Button"  /******/      ]
  /******/    };
  /******/    var idToExternalAndNameMapping = {
  /******/      "webpack/container/remote/home/Content": [  /******/        "default",  /******/        "./Content",  /******/        "webpack/container/reference/home"  /******/      ],
  /******/      "webpack/container/remote/home/Button": [  /******/        "default",  /******/        "./Button",  /******/        "webpack/container/reference/home"  /******/      ]
  /******/    };
  /******/    __webpack_require__.f.remotes = (chunkId, promises) => {
  /******/      if(__webpack_require__.o(chunkMapping, chunkId)) {
  /******/        chunkMapping[chunkId].forEach((id) => {
  /******/          var getScope = __webpack_require__.R;
  /******/          if(!getScope) getScope = [];
  /******/          var data = idToExternalAndNameMapping[id];
  /******/          if(getScope.indexOf(data) >= 0) return;
  /******/          getScope.push(data);
  /******/          if(data.p) return promises.push(data.p);
  /******/          var onError = (error) => {
  /******/            if(!error) error = new Error("Container missing");
  /******/            if(typeof error.message === "string")
  /******/              error.message += '\nwhile loading "' + data[1] + '" from ' + data[2];
  /******/            __webpack_require__.m[id] = () => {
  /******/              throw error;
  /******/            }
  /******/            data.p = 0;
  /******/          };
  /******/          var handleFunction = (fn, arg1, arg2, d, next, first) => {
  /******/            try {
  /******/              var promise = fn(arg1, arg2);
  /******/              if(promise && promise.then) {
  /******/                var p = promise.then((result) => (next(result, d)), onError);
  /******/                if(first) promises.push(data.p = p); else return p;
  /******/              } else {
  /******/                return next(promise, d, first);
  /******/              }
  /******/            } catch(error) {
  /******/              onError(error);
  /******/            }
  /******/          }
  /******/          var onExternal = (external, _, first) => (external ? handleFunction(__webpack_require__.I, data[0], 0, external, onInitialized, first) : onError());
  /******/          var onInitialized = (_, external, first) => (handleFunction(external.get, data[1], getScope, 0, onFactory, first));
  /******/          var onFactory = (factory) => {
  /******/            data.p = 1;
  /******/            __webpack_require__.m[id] = (module) => {
  /******/              module.exports = factory();
  /******/            }
  /******/          };
  /******/          handleFunction(__webpack_require__, data[2], 0, 0, onExternal, 1);
  /******/        });
  /******/      }
  /******/    }
  /******/  })();
  /******/  
  /******/  /* webpack/runtime/sharing */
  /******/  (() => {
  /******/    __webpack_require__.S = {};
  /******/    var initPromises = {};
  /******/    var initTokens = {};
  /******/    __webpack_require__.I = (name, initScope) => {
  /******/      if(!initScope) initScope = [];
  /******/      // handling circular init calls
  /******/      var initToken = initTokens[name];
  /******/      if(!initToken) initToken = initTokens[name] = {};
  /******/      if(initScope.indexOf(initToken) >= 0) return;
  /******/      initScope.push(initToken);
  /******/      // only runs once
  /******/      if(initPromises[name]) return initPromises[name];
  /******/      // creates a new share scope if needed
  /******/      if(!__webpack_require__.o(__webpack_require__.S, name)) __webpack_require__.S[name] = {};
  /******/      // runs all init snippets from all modules reachable
  /******/      var scope = __webpack_require__.S[name];
  /******/      var warn = (msg) => {
  /******/        if (typeof console !== "undefined" && console.warn) console.warn(msg);
  /******/      };
  /******/      var uniqueName = "vue3-demo_layout";
  /******/      var register = (name, version, factory, eager) => {
  /******/        var versions = scope[name] = scope[name] || {};
  /******/        var activeVersion = versions[version];
  /******/        if(!activeVersion || (!activeVersion.loaded && (!eager != !activeVersion.eager ? eager : uniqueName > activeVersion.from))) versions[version] = { get: factory, from: uniqueName, eager: !!eager };
  /******/      };
  /******/      var initExternal = (id) => {
  /******/        var handleError = (err) => (warn("Initialization of sharing external failed: " + err));
  /******/        try {
  /******/          var module = __webpack_require__(id);
  /******/          if(!module) return;
  /******/          var initFn = (module) => (module && module.init && module.init(__webpack_require__.S[name], initScope))
  /******/          if(module.then) return promises.push(module.then(initFn, handleError));
  /******/          var initResult = initFn(module);
  /******/          if(initResult && initResult.then) return promises.push(initResult['catch'](handleError));
  /******/        } catch(err) { handleError(err); }
  /******/      }
  /******/      var promises = [];
  /******/      switch(name) {
  /******/        case "default": {
  /******/          register("vue", "3.3.7", () => (__webpack_require__.e("vendors-node_modules_pnpm_vue_3_3_7_typescript_5_6_3_node_modules_vue_dist_vue_runtime_esm-bu-3fdf17").then(() => (() => (__webpack_require__(/*! ../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js */ "../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js"))))));
  /******/          initExternal("webpack/container/reference/home");
  /******/        }
  /******/        break;
  /******/      }
  /******/      if(!promises.length) return initPromises[name] = 1;
  /******/      return initPromises[name] = Promise.all(promises).then(() => (initPromises[name] = 1));
  /******/    };
  /******/  })();

  /******/  
  /******/  /* webpack/runtime/consumes */
  /******/  (() => {
  /******/    var parseVersion = (str) => {
  /******/      // see webpack/lib/util/semver.js for original code
  /******/      var p=p=>{return p.split(".").map((p=>{return+p==p?+p:p}))},n=/^([^-+]+)?(?:-([^+]+))?(?:+(.+))?$/.exec(str),r=n[1]?p(n[1]):[];return n[2]&&(r.length++,r.push.apply(r,p(n[2]))),n[3]&&(r.push([]),r.push.apply(r,p(n[3]))),r;
  /******/    }
  /******/    var versionLt = (a, b) => {
  /******/      // see webpack/lib/util/semver.js for original code
  /******/      a=parseVersion(a),b=parseVersion(b);for(var r=0;;){if(r>=a.length)return r<b.length&&"u"!=(typeof b[r])[0];var e=a[r],n=(typeof e)[0];if(r>=b.length)return"u"==n;var t=b[r],f=(typeof t)[0];if(n!=f)return"o"==n&&"n"==f||("s"==f||"u"==n);if("o"!=n&&"u"!=n&&e!=t)return e<t;r++}
  /******/    }
  /******/    var rangeToString = (range) => {
  /******/      // see webpack/lib/util/semver.js for original code
  /******/      var r=range[0],n="";if(1===range.length)return"*";if(r+.5){n+=0==r?">=":-1==r?"<":1==r?"^":2==r?"~":r>0?"=":"!=";for(var e=1,a=1;a<range.length;a++){e--,n+="u"==(typeof(t=range[a]))[0]?"-":(e>0?".":"")+(e=2,t)}return n}var g=[];for(a=1;a<range.length;a++){var t=range[a];g.push(0===t?"not("+o()+")":1===t?"("+o()+" || "+o()+")":2===t?g.pop()+" "+g.pop():rangeToString(t))}return o();function o(){return g.pop().replace(/^((.+))$/,"$1")}
  /******/    }
  /******/    var satisfy = (range, version) => {
  /******/      // see webpack/lib/util/semver.js for original code
  /******/      if(0 in range){version=parseVersion(version);var e=range[0],r=e<0;r&&(e=-e-1);for(var n=0,i=1,a=!0;;i++,n++){var f,s,g=i<range.length?(typeof range[i])[0]:"";if(n>=version.length||"o"==(s=(typeof(f=version[n]))[0]))return!a||("u"==g?i>e&&!r:""==g!=r);if("u"==s){if(!a||"u"!=g)return!1}else if(a)if(g==s)if(i<=e){if(f!=range[i])return!1}else{if(r?f>range[i]:f<range[i])return!1;f!=range[i]&&(a=!1)}else if("s"!=g&&"n"!=g){if(r||i<=e)return!1;a=!1,i--}else{if(i<=e||s<g!=r)return!1;a=!1}else"s"!=g&&"n"!=g&&(a=!1,i--)}}var t=[],o=t.pop.bind(t);for(n=1;n<range.length;n++){var u=range[n];t.push(1==u?o()|o():2==u?o()&o():u?satisfy(u,version):!o())}return!!o();
  /******/    }
  /******/    var exists = (scope, key) => {
  /******/      return scope && __webpack_require__.o(scope, key);
  /******/    }
  /******/    var get = (entry) => {
  /******/      entry.loaded = 1;
  /******/      return entry.get()
  /******/    };
  /******/    var eagerOnly = (versions) => {
  /******/      return Object.keys(versions).reduce((filtered, version) => {
  /******/          if (versions[version].eager) {
  /******/            filtered[version] = versions[version];
  /******/          }
  /******/          return filtered;
  /******/      }, {});
  /******/    };
  /******/    var findLatestVersion = (scope, key, eager) => {
  /******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
  /******/      var key = Object.keys(versions).reduce((a, b) => {
  /******/        return !a || versionLt(a, b) ? b : a;
  /******/      }, 0);
  /******/      return key && versions[key];
  /******/    };
  /******/    var findSatisfyingVersion = (scope, key, requiredVersion, eager) => {
  /******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
  /******/      var key = Object.keys(versions).reduce((a, b) => {
  /******/        if (!satisfy(requiredVersion, b)) return a;
  /******/        return !a || versionLt(a, b) ? b : a;
  /******/      }, 0);
  /******/      return key && versions[key]
  /******/    };
  /******/    var findSingletonVersionKey = (scope, key, eager) => {
  /******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
  /******/      return Object.keys(versions).reduce((a, b) => {
  /******/        return !a || (!versions[a].loaded && versionLt(a, b)) ? b : a;
  /******/      }, 0);
  /******/    };
  /******/    var getInvalidSingletonVersionMessage = (scope, key, version, requiredVersion) => {
  /******/      return "Unsatisfied version " + version + " from " + (version && scope[key][version].from) + " of shared singleton module " + key + " (required " + rangeToString(requiredVersion) + ")"
  /******/    };
  /******/    var getInvalidVersionMessage = (scope, scopeName, key, requiredVersion, eager) => {
  /******/      var versions = scope[key];
  /******/      return "No satisfying version (" + rangeToString(requiredVersion) + ")" + (eager ? " for eager consumption" : "") + " of shared module " + key + " found in shared scope " + scopeName + ".\n" +
  /******/        "Available versions: " + Object.keys(versions).map((key) => {
  /******/        return key + " from " + versions[key].from;
  /******/      }).join(", ");
  /******/    };
  /******/    var fail = (msg) => {
  /******/      throw new Error(msg);
  /******/    }
  /******/    var failAsNotExist = (scopeName, key) => {
  /******/      return fail("Shared module " + key + " doesn't exist in shared scope " + scopeName);
  /******/    }
  /******/    var warn = /*#__PURE__*/ (msg) => {
  /******/      if (typeof console !== "undefined" && console.warn) console.warn(msg);
  /******/    };
  /******/    var init = (fn) => (function(scopeName, key, eager, c, d) {
  /******/      var promise = __webpack_require__.I(scopeName);
  /******/      if (promise && promise.then && !eager) {
  /******/        return promise.then(fn.bind(fn, scopeName, __webpack_require__.S[scopeName], key, false, c, d));
  /******/      }
  /******/      return fn(scopeName, __webpack_require__.S[scopeName], key, eager, c, d);
  /******/    });
  /******/    
  /******/    var useFallback = (scopeName, key, fallback) => {
  /******/      return fallback ? fallback() : failAsNotExist(scopeName, key);
  /******/    }
  /******/    var load = /*#__PURE__*/ init((scopeName, scope, key, eager, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      return get(findLatestVersion(scope, key, eager));
  /******/    });
  /******/    var loadVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      var satisfyingVersion = findSatisfyingVersion(scope, key, requiredVersion, eager);
  /******/      if (satisfyingVersion) return get(satisfyingVersion);
  /******/      warn(getInvalidVersionMessage(scope, scopeName, key, requiredVersion, eager))
  /******/      return get(findLatestVersion(scope, key, eager));
  /******/    });
  /******/    var loadStrictVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      var satisfyingVersion = findSatisfyingVersion(scope, key, requiredVersion, eager);
  /******/      if (satisfyingVersion) return get(satisfyingVersion);
  /******/      if (fallback) return fallback();
  /******/      fail(getInvalidVersionMessage(scope, scopeName, key, requiredVersion, eager));
  /******/    });
  /******/    var loadSingleton = /*#__PURE__*/ init((scopeName, scope, key, eager, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      var version = findSingletonVersionKey(scope, key, eager);
  /******/      return get(scope[key][version]);
  /******/    });
  /******/    var loadSingletonVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      var version = findSingletonVersionKey(scope, key, eager);
  /******/      if (!satisfy(requiredVersion, version)) {
  /******/        warn(getInvalidSingletonVersionMessage(scope, key, version, requiredVersion));
  /******/      }
  /******/      return get(scope[key][version]);
  /******/    });
  /******/    var loadStrictSingletonVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
  /******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
  /******/      var version = findSingletonVersionKey(scope, key, eager);
  /******/      if (!satisfy(requiredVersion, version)) {
  /******/        fail(getInvalidSingletonVersionMessage(scope, key, version, requiredVersion));
  /******/      }
  /******/      return get(scope[key][version]);
  /******/    });
  /******/    var installedModules = {};
  /******/    var moduleToHandlerMapping = {
  /******/      "webpack/sharing/consume/default/vue/vue": () => (loadSingletonVersion("default", "vue", false, [1,3,0,11], () => (__webpack_require__.e("vendors-node_modules_pnpm_vue_3_3_7_typescript_5_6_3_node_modules_vue_dist_vue_runtime_esm-bu-3fdf17").then(() => (() => (__webpack_require__(/*! vue */ "../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js")))))))
  /******/    };
  /******/    // no consumes in initial chunks
  /******/    var chunkMapping = {
  /******/      "src_main_js": [  /******/        "webpack/sharing/consume/default/vue/vue"  /******/      ]
  /******/    };
  /******/    var startedInstallModules = {};
  /******/    __webpack_require__.f.consumes = (chunkId, promises) => {
  /******/      if(__webpack_require__.o(chunkMapping, chunkId)) {
  /******/        chunkMapping[chunkId].forEach((id) => {
  /******/          if(__webpack_require__.o(installedModules, id)) return promises.push(installedModules[id]);
  /******/          if(!startedInstallModules[id]) {
  /******/          var onFactory = (factory) => {
  /******/            installedModules[id] = 0;
  /******/            __webpack_require__.m[id] = (module) => {
  /******/              delete __webpack_require__.c[id];
  /******/              module.exports = factory();
  /******/            }
  /******/          };
  /******/          startedInstallModules[id] = true;
  /******/          var onError = (error) => {
  /******/            delete installedModules[id];
  /******/            __webpack_require__.m[id] = (module) => {
  /******/              delete __webpack_require__.c[id];
  /******/              throw error;
  /******/            }
  /******/          };
  /******/          try {
  /******/            var promise = moduleToHandlerMapping[id]();
  /******/            if(promise.then) {
  /******/              promises.push(installedModules[id] = promise.then(onFactory)['catch'](onError));
  /******/            } else onFactory(promise);
  /******/          } catch(e) { onError(e); }
  /******/          }
  /******/        });
  /******/      }
  /******/    }
  /******/  })();
  /******/  
  /******/  /* webpack/runtime/css loading */
  /******/  (() => {
  /******/    if (typeof document === "undefined") return;
  /******/    var createStylesheet = (chunkId, fullhref, oldTag, resolve, reject) => {
  /******/      var linkTag = document.createElement("link");
  /******/    
  /******/      linkTag.rel = "stylesheet";
  /******/      linkTag.type = "text/css";
  /******/      if (__webpack_require__.nc) {
  /******/        linkTag.nonce = __webpack_require__.nc;
  /******/      }
  /******/      var onLinkComplete = (event) => {
  /******/        // avoid mem leaks.
  /******/        linkTag.onerror = linkTag.onload = null;
  /******/        if (event.type === 'load') {
  /******/          resolve();
  /******/        } else {
  /******/          var errorType = event && event.type;
  /******/          var realHref = event && event.target && event.target.href || fullhref;
  /******/          var err = new Error("Loading CSS chunk " + chunkId + " failed.\n(" + errorType + ": " + realHref + ")");
  /******/          err.name = "ChunkLoadError";
  /******/          err.code = "CSS_CHUNK_LOAD_FAILED";
  /******/          err.type = errorType;
  /******/          err.request = realHref;
  /******/          if (linkTag.parentNode) linkTag.parentNode.removeChild(linkTag)
  /******/          reject(err);
  /******/        }
  /******/      }
  /******/      linkTag.onerror = linkTag.onload = onLinkComplete;
  /******/      linkTag.href = fullhref;
  /******/    
  /******/    
  /******/      if (oldTag) {
  /******/        oldTag.parentNode.insertBefore(linkTag, oldTag.nextSibling);
  /******/      } else {
  /******/        document.head.appendChild(linkTag);
  /******/      }
  /******/      return linkTag;
  /******/    };
  /******/    var findStylesheet = (href, fullhref) => {
  /******/      var existingLinkTags = document.getElementsByTagName("link");
  /******/      for(var i = 0; i < existingLinkTags.length; i++) {
  /******/        var tag = existingLinkTags[i];
  /******/        var dataHref = tag.getAttribute("data-href") || tag.getAttribute("href");
  /******/        if(tag.rel === "stylesheet" && (dataHref === href || dataHref === fullhref)) return tag;
  /******/      }
  /******/      var existingStyleTags = document.getElementsByTagName("style");
  /******/      for(var i = 0; i < existingStyleTags.length; i++) {
  /******/        var tag = existingStyleTags[i];
  /******/        var dataHref = tag.getAttribute("data-href");
  /******/        if(dataHref === href || dataHref === fullhref) return tag;
  /******/      }
  /******/    };
  /******/    var loadStylesheet = (chunkId) => {
  /******/      return new Promise((resolve, reject) => {
  /******/        var href = __webpack_require__.miniCssF(chunkId);
  /******/        var fullhref = __webpack_require__.p + href;
  /******/        if(findStylesheet(href, fullhref)) return resolve();
  /******/        createStylesheet(chunkId, fullhref, null, resolve, reject);
  /******/      });
  /******/    }
  /******/    // object to store loaded CSS chunks
  /******/    var installedCssChunks = {
  /******/      "main": 0
  /******/    };
  /******/    
  /******/    __webpack_require__.f.miniCss = (chunkId, promises) => {
  /******/      var cssChunks = {"src_main_js":1};
  /******/      if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
  /******/      else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
  /******/        promises.push(installedCssChunks[chunkId] = loadStylesheet(chunkId).then(() => {
  /******/          installedCssChunks[chunkId] = 0;
  /******/        }, (e) => {
  /******/          delete installedCssChunks[chunkId];
  /******/          throw e;
  /******/        }));
  /******/      }
  /******/    };
  /******/    
  /******/    var oldTags = [];
  /******/    var newTags = [];
  /******/    var applyHandler = (options) => {
  /******/      return { dispose: () => {
  /******/        for(var i = 0; i < oldTags.length; i++) {
  /******/          var oldTag = oldTags[i];
  /******/          if(oldTag.parentNode) oldTag.parentNode.removeChild(oldTag);
  /******/        }
  /******/        oldTags.length = 0;
  /******/      }, apply: () => {
  /******/        for(var i = 0; i < newTags.length; i++) newTags[i].rel = "stylesheet";
  /******/        newTags.length = 0;
  /******/      } };
  /******/    }
  /******/    __webpack_require__.hmrC.miniCss = (chunkIds, removedChunks, removedModules, promises, applyHandlers, updatedModulesList) => {
  /******/      applyHandlers.push(applyHandler);
  /******/      chunkIds.forEach((chunkId) => {
  /******/        var href = __webpack_require__.miniCssF(chunkId);
  /******/        var fullhref = __webpack_require__.p + href;
  /******/        var oldTag = findStylesheet(href, fullhref);
  /******/        if(!oldTag) return;
  /******/        promises.push(new Promise((resolve, reject) => {
  /******/          var tag = createStylesheet(chunkId, fullhref, oldTag, () => {
  /******/            tag.as = "style";
  /******/            tag.rel = "preload";
  /******/            resolve();
  /******/          }, reject);
  /******/          oldTags.push(oldTag);
  /******/          newTags.push(tag);
  /******/        }));
  /******/      });
  /******/    }
  /******/    
  /******/    // no prefetching
  /******/    
  /******/    // no preloaded
  /******/  })();
  /******/  
  /******/  /* webpack/runtime/jsonp chunk loading */
  /******/  (() => {
  /******/    // no baseURI
  /******/    
  /******/    // object to store loaded and loading chunks
  /******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
  /******/    // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
  /******/    var installedChunks = __webpack_require__.hmrS_jsonp = __webpack_require__.hmrS_jsonp || {
  /******/      "main": 0
  /******/    };
  /******/    
  /******/    __webpack_require__.f.j = (chunkId, promises) => {
  /******/        // JSONP chunk loading for javascript
  /******/        var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
  /******/        if(installedChunkData !== 0) { // 0 means "already installed".
  /******/    
  /******/          // a Promise means "currently loading".
  /******/          if(installedChunkData) {
  /******/            promises.push(installedChunkData[2]);
  /******/          } else {
  /******/            if(!/^webpack_container_remote_home_(Button|Content)$/.test(chunkId)) {
  /******/              // setup Promise in chunk cache
  /******/              var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
  /******/              promises.push(installedChunkData[2] = promise);
  /******/    
  /******/              // start chunk loading
  /******/              var url = __webpack_require__.p + __webpack_require__.u(chunkId);
  /******/              // create error before stack unwound to get useful stacktrace later
  /******/              var error = new Error();
  /******/              var loadingEnded = (event) => {
  /******/                if(__webpack_require__.o(installedChunks, chunkId)) {
  /******/                  installedChunkData = installedChunks[chunkId];
  /******/                  if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
  /******/                  if(installedChunkData) {
  /******/                    var errorType = event && (event.type === 'load' ? 'missing' : event.type);
  /******/                    var realSrc = event && event.target && event.target.src;
  /******/                    error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
  /******/                    error.name = 'ChunkLoadError';
  /******/                    error.type = errorType;
  /******/                    error.request = realSrc;
  /******/                    installedChunkData[1](error);
  /******/                  }
  /******/                }
  /******/              };
  /******/              __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
  /******/            } else installedChunks[chunkId] = 0;
  /******/          }
  /******/        }
  /******/    };
  /******/    
  /******/    // no prefetching
  /******/    
  /******/    // no preloaded
  /******/    

  /******/    
  /******/    self["webpackHotUpdatevue3_demo_layout"] = (chunkId, moreModules, runtime) => {
  /******/      for(var moduleId in moreModules) {
  /******/        if(__webpack_require__.o(moreModules, moduleId)) {
  /******/          currentUpdate[moduleId] = moreModules[moduleId];
  /******/          if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
  /******/        }
  /******/      }
  /******/      if(runtime) currentUpdateRuntime.push(runtime);
  /******/      if(waitingUpdateResolves[chunkId]) {
  /******/        waitingUpdateResolves[chunkId]();
  /******/        waitingUpdateResolves[chunkId] = undefined;
  /******/      }
  /******/    };
  /******/    

  /******/    
  /******/    // no on chunks loaded
  /******/    
  /******/    // install a JSONP callback for chunk loading
  /******/    var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
  /******/      var [chunkIds, moreModules, runtime] = data;
  /******/      // add "moreModules" to the modules object,
  /******/      // then flag all "chunkIds" as loaded and fire callback
  /******/      var moduleId, chunkId, i = 0;
  /******/      if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
  /******/        for(moduleId in moreModules) {
  /******/          if(__webpack_require__.o(moreModules, moduleId)) {
  /******/            __webpack_require__.m[moduleId] = moreModules[moduleId];
  /******/          }
  /******/        }
  /******/        if(runtime) var result = runtime(__webpack_require__);
  /******/      }
  /******/      if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
  /******/      for(;i < chunkIds.length; i++) {
  /******/        chunkId = chunkIds[i];
  /******/        if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
  /******/          installedChunks[chunkId][0]();
  /******/        }
  /******/        installedChunks[chunkId] = 0;
  /******/      }
  /******/    
  /******/    }
  /******/    
  /******/    var chunkLoadingGlobal = self["webpackChunkvue3_demo_layout"] = self["webpackChunkvue3_demo_layout"] || [];
  /******/    chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
  /******/    chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
  /******/  })();
  /******/  var __webpack_exports__ = __webpack_require__("./src/index.js");
  /******/  
  /******/ })()
  ;

3.2.3.3 remoteEntry.js文件

less 复制代码 
var home;
/******/ (() => { // webpackBootstrap
/******/  var __webpack_modules__ = ({

/***/ "webpack/container/entry/home":
/*!***********************!*\
  !*** container entry ***!
  ***********************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var moduleMap = {
  "./Content": () => {
    return Promise.all([__webpack_require__.e("webpack_sharing_consume_default_vue_vue"), __webpack_require__.e("src_components_Content_vue-_cddc0")]).then(() => (() => ((__webpack_require__(/*! ./src/components/Content */ "./src/components/Content.vue")))));
  },
  "./Button": () => {
    return Promise.all([__webpack_require__.e("webpack_sharing_consume_default_vue_vue"), __webpack_require__.e("src_components_Button_js")]).then(() => (() => ((__webpack_require__(/*! ./src/components/Button */ "./src/components/Button.js")))));
  }
};
var get = (module, getScope) => {
  __webpack_require__.R = getScope;
  getScope = (
    __webpack_require__.o(moduleMap, module)
      ? moduleMap[module]()
      : Promise.resolve().then(() => {
        throw new Error('Module "' + module + '" does not exist in container.');
      })
  );
  __webpack_require__.R = undefined;
  return getScope;
};
var init = (shareScope, initScope) => {
  if (!__webpack_require__.S) return;
  var name = "default"
  var oldScope = __webpack_require__.S[name];
  if(oldScope && oldScope !== shareScope) throw new Error("Container initialization failed as it has already been initialized with a different share scope");
  __webpack_require__.S[name] = shareScope;
  return __webpack_require__.I(name, initScope);
};

// This exports getters to disallow modifications
__webpack_require__.d(exports, {
  get: () => (get),
  init: () => (init)
});

/***/ })

/******/  });
/************************************************************************/
/******/  // The module cache
/******/  var __webpack_module_cache__ = {};
/******/  
/******/  // The require function
/******/  function __webpack_require__(moduleId) {
/******/    // Check if module is in cache
/******/    var cachedModule = __webpack_module_cache__[moduleId];
/******/    if (cachedModule !== undefined) {
/******/      return cachedModule.exports;
/******/    }
/******/    // Create a new module (and put it into the cache)
/******/    var module = __webpack_module_cache__[moduleId] = {
/******/      // no module.id needed
/******/      // no module.loaded needed
/******/      exports: {}
/******/    };
/******/  
/******/    // Execute the module function
/******/    var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
/******/    __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
/******/    module = execOptions.module;
/******/    execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
/******/  
/******/    // Return the exports of the module
/******/    return module.exports;
/******/  }
/******/  
/******/  // expose the modules object (__webpack_modules__)
/******/  __webpack_require__.m = __webpack_modules__;
/******/  
/******/  // expose the module cache
/******/  __webpack_require__.c = __webpack_module_cache__;
/******/  
/******/  // expose the module execution interceptor
/******/  __webpack_require__.i = [];
/******/  

/******/  
/******/  /* webpack/runtime/ensure chunk */
/******/  (() => {
/******/    __webpack_require__.f = {};
/******/    // This file contains only the entry chunk.
/******/    // The chunk loading function for additional chunks
/******/    __webpack_require__.e = (chunkId) => {
/******/      return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
/******/        __webpack_require__.f[key](chunkId, promises);
/******/        return promises;
/******/      }, []));
/******/    };
/******/  })();
/******/  
/******/  

/******/  
/******/  /* webpack/runtime/get mini-css chunk filename */
/******/  (() => {
/******/    // This function allow to reference async chunks
/******/    __webpack_require__.miniCssF = (chunkId) => {
/******/      // return url for filenames based on template
/******/      return undefined;
/******/    };
/******/  })();

/******/  
/******/  /* webpack/runtime/load script */
/******/  (() => {
/******/    var inProgress = {};
/******/    var dataWebpackPrefix = "vue3-demo_home:";
/******/    // loadScript function to load a script via script tag
/******/    __webpack_require__.l = (url, done, key, chunkId) => {
/******/      if(inProgress[url]) { inProgress[url].push(done); return; }
/******/      var script, needAttach;
/******/      if(key !== undefined) {
/******/        var scripts = document.getElementsByTagName("script");
/******/        for(var i = 0; i < scripts.length; i++) {
/******/          var s = scripts[i];
/******/          if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
/******/        }
/******/      }
/******/      if(!script) {
/******/        needAttach = true;
/******/        script = document.createElement('script');
/******/    
/******/        script.charset = 'utf-8';
/******/        script.timeout = 120;
/******/        if (__webpack_require__.nc) {
/******/          script.setAttribute("nonce", __webpack_require__.nc);
/******/        }
/******/        script.setAttribute("data-webpack", dataWebpackPrefix + key);
/******/    
/******/        script.src = url;
/******/      }
/******/      inProgress[url] = [done];
/******/      var onScriptComplete = (prev, event) => {
/******/        // avoid mem leaks in IE.
/******/        script.onerror = script.onload = null;
/******/        clearTimeout(timeout);
/******/        var doneFns = inProgress[url];
/******/        delete inProgress[url];
/******/        script.parentNode && script.parentNode.removeChild(script);
/******/        doneFns && doneFns.forEach((fn) => (fn(event)));
/******/        if(prev) return prev(event);
/******/      }
/******/      var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
/******/      script.onerror = onScriptComplete.bind(null, script.onerror);
/******/      script.onload = onScriptComplete.bind(null, script.onload);
/******/      needAttach && document.head.appendChild(script);
/******/    };
/******/  })();

/******/  
/******/  /* webpack/runtime/remotes loading */
/******/  (() => {
/******/    var chunkMapping = {};
/******/    var idToExternalAndNameMapping = {};
/******/    __webpack_require__.f.remotes = (chunkId, promises) => {
/******/      if(__webpack_require__.o(chunkMapping, chunkId)) {
/******/        chunkMapping[chunkId].forEach((id) => {
/******/          var getScope = __webpack_require__.R;
/******/          if(!getScope) getScope = [];
/******/          var data = idToExternalAndNameMapping[id];
/******/          if(getScope.indexOf(data) >= 0) return;
/******/          getScope.push(data);
/******/          if(data.p) return promises.push(data.p);
/******/          var onError = (error) => {
/******/            if(!error) error = new Error("Container missing");
/******/            if(typeof error.message === "string")
/******/              error.message += '\nwhile loading "' + data[1] + '" from ' + data[2];
/******/            __webpack_require__.m[id] = () => {
/******/              throw error;
/******/            }
/******/            data.p = 0;
/******/          };
/******/          var handleFunction = (fn, arg1, arg2, d, next, first) => {
/******/            try {
/******/              var promise = fn(arg1, arg2);
/******/              if(promise && promise.then) {
/******/                var p = promise.then((result) => (next(result, d)), onError);
/******/                if(first) promises.push(data.p = p); else return p;
/******/              } else {
/******/                return next(promise, d, first);
/******/              }
/******/            } catch(error) {
/******/              onError(error);
/******/            }
/******/          }
/******/          var onExternal = (external, _, first) => (external ? handleFunction(__webpack_require__.I, data[0], 0, external, onInitialized, first) : onError());
/******/          var onInitialized = (_, external, first) => (handleFunction(external.get, data[1], getScope, 0, onFactory, first));
/******/          var onFactory = (factory) => {
/******/            data.p = 1;
/******/            __webpack_require__.m[id] = (module) => {
/******/              module.exports = factory();
/******/            }
/******/          };
/******/          handleFunction(__webpack_require__, data[2], 0, 0, onExternal, 1);
/******/        });
/******/      }
/******/    }
/******/  })();
/******/  
/******/  /* webpack/runtime/sharing */
/******/  (() => {
/******/    __webpack_require__.S = {};
/******/    var initPromises = {};
/******/    var initTokens = {};
/******/    __webpack_require__.I = (name, initScope) => {
/******/      if(!initScope) initScope = [];
/******/      // handling circular init calls
/******/      var initToken = initTokens[name];
/******/      if(!initToken) initToken = initTokens[name] = {};
/******/      if(initScope.indexOf(initToken) >= 0) return;
/******/      initScope.push(initToken);
/******/      // only runs once
/******/      if(initPromises[name]) return initPromises[name];
/******/      // creates a new share scope if needed
/******/      if(!__webpack_require__.o(__webpack_require__.S, name)) __webpack_require__.S[name] = {};
/******/      // runs all init snippets from all modules reachable
/******/      var scope = __webpack_require__.S[name];
/******/      var warn = (msg) => {
/******/        if (typeof console !== "undefined" && console.warn) console.warn(msg);
/******/      };
/******/      var uniqueName = "vue3-demo_home";
/******/      var register = (name, version, factory, eager) => {
/******/        var versions = scope[name] = scope[name] || {};
/******/        var activeVersion = versions[version];
/******/        if(!activeVersion || (!activeVersion.loaded && (!eager != !activeVersion.eager ? eager : uniqueName > activeVersion.from))) versions[version] = { get: factory, from: uniqueName, eager: !!eager };
/******/      };
/******/      var initExternal = (id) => {
/******/        var handleError = (err) => (warn("Initialization of sharing external failed: " + err));
/******/        try {
/******/          var module = __webpack_require__(id);
/******/          if(!module) return;
/******/          var initFn = (module) => (module && module.init && module.init(__webpack_require__.S[name], initScope))
/******/          if(module.then) return promises.push(module.then(initFn, handleError));
/******/          var initResult = initFn(module);
/******/          if(initResult && initResult.then) return promises.push(initResult['catch'](handleError));
/******/        } catch(err) { handleError(err); }
/******/      }
/******/      var promises = [];
/******/      switch(name) {
/******/        case "default": {
/******/          register("vue", "3.3.7", () => (__webpack_require__.e("vendors-node_modules_pnpm_vue_3_3_7_typescript_5_6_3_node_modules_vue_dist_vue_runtime_esm-bu-3fdf17").then(() => (() => (__webpack_require__(/*! ../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js */ "../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js"))))));
/******/        }
/******/        break;
/******/      }
/******/      if(!promises.length) return initPromises[name] = 1;
/******/      return initPromises[name] = Promise.all(promises).then(() => (initPromises[name] = 1));
/******/    };
/******/  })();
/******/  

/******/  /* webpack/runtime/consumes */
/******/  (() => {
/******/    var parseVersion = (str) => {
/******/      // see webpack/lib/util/semver.js for original code
/******/      var p=p=>{return p.split(".").map((p=>{return+p==p?+p:p}))},n=/^([^-+]+)?(?:-([^+]+))?(?:+(.+))?$/.exec(str),r=n[1]?p(n[1]):[];return n[2]&&(r.length++,r.push.apply(r,p(n[2]))),n[3]&&(r.push([]),r.push.apply(r,p(n[3]))),r;
/******/    }
/******/    var versionLt = (a, b) => {
/******/      // see webpack/lib/util/semver.js for original code
/******/      a=parseVersion(a),b=parseVersion(b);for(var r=0;;){if(r>=a.length)return r<b.length&&"u"!=(typeof b[r])[0];var e=a[r],n=(typeof e)[0];if(r>=b.length)return"u"==n;var t=b[r],f=(typeof t)[0];if(n!=f)return"o"==n&&"n"==f||("s"==f||"u"==n);if("o"!=n&&"u"!=n&&e!=t)return e<t;r++}
/******/    }
/******/    var rangeToString = (range) => {
/******/      // see webpack/lib/util/semver.js for original code
/******/      var r=range[0],n="";if(1===range.length)return"*";if(r+.5){n+=0==r?">=":-1==r?"<":1==r?"^":2==r?"~":r>0?"=":"!=";for(var e=1,a=1;a<range.length;a++){e--,n+="u"==(typeof(t=range[a]))[0]?"-":(e>0?".":"")+(e=2,t)}return n}var g=[];for(a=1;a<range.length;a++){var t=range[a];g.push(0===t?"not("+o()+")":1===t?"("+o()+" || "+o()+")":2===t?g.pop()+" "+g.pop():rangeToString(t))}return o();function o(){return g.pop().replace(/^((.+))$/,"$1")}
/******/    }
/******/    var satisfy = (range, version) => {
/******/      // see webpack/lib/util/semver.js for original code
/******/      if(0 in range){version=parseVersion(version);var e=range[0],r=e<0;r&&(e=-e-1);for(var n=0,i=1,a=!0;;i++,n++){var f,s,g=i<range.length?(typeof range[i])[0]:"";if(n>=version.length||"o"==(s=(typeof(f=version[n]))[0]))return!a||("u"==g?i>e&&!r:""==g!=r);if("u"==s){if(!a||"u"!=g)return!1}else if(a)if(g==s)if(i<=e){if(f!=range[i])return!1}else{if(r?f>range[i]:f<range[i])return!1;f!=range[i]&&(a=!1)}else if("s"!=g&&"n"!=g){if(r||i<=e)return!1;a=!1,i--}else{if(i<=e||s<g!=r)return!1;a=!1}else"s"!=g&&"n"!=g&&(a=!1,i--)}}var t=[],o=t.pop.bind(t);for(n=1;n<range.length;n++){var u=range[n];t.push(1==u?o()|o():2==u?o()&o():u?satisfy(u,version):!o())}return!!o();
/******/    }
/******/    var exists = (scope, key) => {
/******/      return scope && __webpack_require__.o(scope, key);
/******/    }
/******/    var get = (entry) => {
/******/      entry.loaded = 1;
/******/      return entry.get()
/******/    };
/******/    var eagerOnly = (versions) => {
/******/      return Object.keys(versions).reduce((filtered, version) => {
/******/          if (versions[version].eager) {
/******/            filtered[version] = versions[version];
/******/          }
/******/          return filtered;
/******/      }, {});
/******/    };
/******/    var findLatestVersion = (scope, key, eager) => {
/******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
/******/      var key = Object.keys(versions).reduce((a, b) => {
/******/        return !a || versionLt(a, b) ? b : a;
/******/      }, 0);
/******/      return key && versions[key];
/******/    };
/******/    var findSatisfyingVersion = (scope, key, requiredVersion, eager) => {
/******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
/******/      var key = Object.keys(versions).reduce((a, b) => {
/******/        if (!satisfy(requiredVersion, b)) return a;
/******/        return !a || versionLt(a, b) ? b : a;
/******/      }, 0);
/******/      return key && versions[key]
/******/    };
/******/    var findSingletonVersionKey = (scope, key, eager) => {
/******/      var versions = eager ? eagerOnly(scope[key]) : scope[key];
/******/      return Object.keys(versions).reduce((a, b) => {
/******/        return !a || (!versions[a].loaded && versionLt(a, b)) ? b : a;
/******/      }, 0);
/******/    };
/******/    var getInvalidSingletonVersionMessage = (scope, key, version, requiredVersion) => {
/******/      return "Unsatisfied version " + version + " from " + (version && scope[key][version].from) + " of shared singleton module " + key + " (required " + rangeToString(requiredVersion) + ")"
/******/    };
/******/    var getInvalidVersionMessage = (scope, scopeName, key, requiredVersion, eager) => {
/******/      var versions = scope[key];
/******/      return "No satisfying version (" + rangeToString(requiredVersion) + ")" + (eager ? " for eager consumption" : "") + " of shared module " + key + " found in shared scope " + scopeName + ".\n" +
/******/        "Available versions: " + Object.keys(versions).map((key) => {
/******/        return key + " from " + versions[key].from;
/******/      }).join(", ");
/******/    };
/******/    var fail = (msg) => {
/******/      throw new Error(msg);
/******/    }
/******/    var failAsNotExist = (scopeName, key) => {
/******/      return fail("Shared module " + key + " doesn't exist in shared scope " + scopeName);
/******/    }
/******/    var warn = /*#__PURE__*/ (msg) => {
/******/      if (typeof console !== "undefined" && console.warn) console.warn(msg);
/******/    };
/******/    var init = (fn) => (function(scopeName, key, eager, c, d) {
/******/      var promise = __webpack_require__.I(scopeName);
/******/      if (promise && promise.then && !eager) {
/******/        return promise.then(fn.bind(fn, scopeName, __webpack_require__.S[scopeName], key, false, c, d));
/******/      }
/******/      return fn(scopeName, __webpack_require__.S[scopeName], key, eager, c, d);
/******/    });
/******/    
/******/    var useFallback = (scopeName, key, fallback) => {
/******/      return fallback ? fallback() : failAsNotExist(scopeName, key);
/******/    }
/******/    var load = /*#__PURE__*/ init((scopeName, scope, key, eager, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      return get(findLatestVersion(scope, key, eager));
/******/    });
/******/    var loadVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      var satisfyingVersion = findSatisfyingVersion(scope, key, requiredVersion, eager);
/******/      if (satisfyingVersion) return get(satisfyingVersion);
/******/      warn(getInvalidVersionMessage(scope, scopeName, key, requiredVersion, eager))
/******/      return get(findLatestVersion(scope, key, eager));
/******/    });
/******/    var loadStrictVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      var satisfyingVersion = findSatisfyingVersion(scope, key, requiredVersion, eager);
/******/      if (satisfyingVersion) return get(satisfyingVersion);
/******/      if (fallback) return fallback();
/******/      fail(getInvalidVersionMessage(scope, scopeName, key, requiredVersion, eager));
/******/    });
/******/    var loadSingleton = /*#__PURE__*/ init((scopeName, scope, key, eager, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      var version = findSingletonVersionKey(scope, key, eager);
/******/      return get(scope[key][version]);
/******/    });
/******/    var loadSingletonVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      var version = findSingletonVersionKey(scope, key, eager);
/******/      if (!satisfy(requiredVersion, version)) {
/******/        warn(getInvalidSingletonVersionMessage(scope, key, version, requiredVersion));
/******/      }
/******/      return get(scope[key][version]);
/******/    });
/******/    var loadStrictSingletonVersion = /*#__PURE__*/ init((scopeName, scope, key, eager, requiredVersion, fallback) => {
/******/      if (!exists(scope, key)) return useFallback(scopeName, key, fallback);
/******/      var version = findSingletonVersionKey(scope, key, eager);
/******/      if (!satisfy(requiredVersion, version)) {
/******/        fail(getInvalidSingletonVersionMessage(scope, key, version, requiredVersion));
/******/      }
/******/      return get(scope[key][version]);
/******/    });
/******/    var installedModules = {};
/******/    var moduleToHandlerMapping = {
/******/      "webpack/sharing/consume/default/vue/vue": () => (loadSingletonVersion("default", "vue", false, [1,3,0,11], () => (__webpack_require__.e("vendors-node_modules_pnpm_vue_3_3_7_typescript_5_6_3_node_modules_vue_dist_vue_runtime_esm-bu-3fdf17").then(() => (() => (__webpack_require__(/*! vue */ "../../node_modules/.pnpm/vue@3.3.7_typescript@5.6.3/node_modules/vue/dist/vue.runtime.esm-bundler.js")))))))
/******/    };
/******/    // no consumes in initial chunks
/******/    var chunkMapping = {
/******/      "webpack_sharing_consume_default_vue_vue": [/******/        "webpack/sharing/consume/default/vue/vue"/******/      ]
/******/    };
/******/    var startedInstallModules = {};
/******/    __webpack_require__.f.consumes = (chunkId, promises) => {
/******/      if(__webpack_require__.o(chunkMapping, chunkId)) {
/******/        chunkMapping[chunkId].forEach((id) => {
/******/          if(__webpack_require__.o(installedModules, id)) return promises.push(installedModules[id]);
/******/          if(!startedInstallModules[id]) {
/******/          var onFactory = (factory) => {
/******/            installedModules[id] = 0;
/******/            __webpack_require__.m[id] = (module) => {
/******/              delete __webpack_require__.c[id];
/******/              module.exports = factory();
/******/            }
/******/          };
/******/          startedInstallModules[id] = true;
/******/          var onError = (error) => {
/******/            delete installedModules[id];
/******/            __webpack_require__.m[id] = (module) => {
/******/              delete __webpack_require__.c[id];
/******/              throw error;
/******/            }
/******/          };
/******/          try {
/******/            var promise = moduleToHandlerMapping[id]();
/******/            if(promise.then) {
/******/              promises.push(installedModules[id] = promise.then(onFactory)['catch'](onError));
/******/            } else onFactory(promise);
/******/          } catch(e) { onError(e); }
/******/          }
/******/        });
/******/      }
/******/    }
/******/  })();
/******/  

/******/  
/******/  /* webpack/runtime/jsonp chunk loading */
/******/  (() => {
/******/    // no baseURI
/******/    
/******/    // object to store loaded and loading chunks
/******/    // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/    // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/    var installedChunks = __webpack_require__.hmrS_jsonp = __webpack_require__.hmrS_jsonp || {
/******/      "home": 0
/******/    };
/******/    
/******/    __webpack_require__.f.j = (chunkId, promises) => {
/******/        // JSONP chunk loading for javascript
/******/        var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
/******/        if(installedChunkData !== 0) { // 0 means "already installed".
/******/    
/******/          // a Promise means "currently loading".
/******/          if(installedChunkData) {
/******/            promises.push(installedChunkData[2]);
/******/          } else {
/******/            if("webpack_sharing_consume_default_vue_vue" != chunkId) {
/******/              // setup Promise in chunk cache
/******/              var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
/******/              promises.push(installedChunkData[2] = promise);
/******/    
/******/              // start chunk loading
/******/              var url = __webpack_require__.p + __webpack_require__.u(chunkId);
/******/              // create error before stack unwound to get useful stacktrace later
/******/              var error = new Error();
/******/              var loadingEnded = (event) => {
/******/                if(__webpack_require__.o(installedChunks, chunkId)) {
/******/                  installedChunkData = installedChunks[chunkId];
/******/                  if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
/******/                  if(installedChunkData) {
/******/                    var errorType = event && (event.type === 'load' ? 'missing' : event.type);
/******/                    var realSrc = event && event.target && event.target.src;
/******/                    error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
/******/                    error.name = 'ChunkLoadError';
/******/                    error.type = errorType;
/******/                    error.request = realSrc;
/******/                    installedChunkData[1](error);
/******/                  }
/******/                }
/******/              };
/******/              __webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
/******/            } else installedChunks[chunkId] = 0;
/******/          }
/******/        }
/******/    };
/******/    
/******/    // no prefetching
/******/    
/******/    // no preloaded
/******/    
/******/    var currentUpdatedModulesList;
/******/    var waitingUpdateResolves = {};
/******/    function loadUpdateChunk(chunkId, updatedModulesList) {
/******/      currentUpdatedModulesList = updatedModulesList;
/******/      return new Promise((resolve, reject) => {
/******/        waitingUpdateResolves[chunkId] = resolve;
/******/        // start update chunk loading
/******/        var url = __webpack_require__.p + __webpack_require__.hu(chunkId);
/******/        // create error before stack unwound to get useful stacktrace later
/******/        var error = new Error();
/******/        var loadingEnded = (event) => {
/******/          if(waitingUpdateResolves[chunkId]) {
/******/            waitingUpdateResolves[chunkId] = undefined
/******/            var errorType = event && (event.type === 'load' ? 'missing' : event.type);
/******/            var realSrc = event && event.target && event.target.src;
/******/            error.message = 'Loading hot update chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
/******/            error.name = 'ChunkLoadError';
/******/            error.type = errorType;
/******/            error.request = realSrc;
/******/            reject(error);
/******/          }
/******/        };
/******/        __webpack_require__.l(url, loadingEnded);
/******/      });
/******/    }
/******/    
/******/    self["webpackHotUpdatevue3_demo_home"] = (chunkId, moreModules, runtime) => {
/******/      for(var moduleId in moreModules) {
/******/        if(__webpack_require__.o(moreModules, moduleId)) {
/******/          currentUpdate[moduleId] = moreModules[moduleId];
/******/          if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
/******/        }
/******/      }
/******/      if(runtime) currentUpdateRuntime.push(runtime);
/******/      if(waitingUpdateResolves[chunkId]) {
/******/        waitingUpdateResolves[chunkId]();
/******/        waitingUpdateResolves[chunkId] = undefined;
/******/      }
/******/    };

/******/    };

/******/    
/******/    
/******/    // no on chunks loaded
/******/    
/******/    // install a JSONP callback for chunk loading
/******/    var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/      var [chunkIds, moreModules, runtime] = data;
/******/      // add "moreModules" to the modules object,
/******/      // then flag all "chunkIds" as loaded and fire callback
/******/      var moduleId, chunkId, i = 0;
/******/      if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/        for(moduleId in moreModules) {
/******/          if(__webpack_require__.o(moreModules, moduleId)) {
/******/            __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/          }
/******/        }
/******/        if(runtime) var result = runtime(__webpack_require__);
/******/      }
/******/      if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/      for(;i < chunkIds.length; i++) {
/******/        chunkId = chunkIds[i];
/******/        if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/          installedChunks[chunkId][0]();
/******/        }
/******/        installedChunks[chunkId] = 0;
/******/      }
/******/    
/******/    }
/******/    
/******/    var chunkLoadingGlobal = self["webpackChunkvue3_demo_home"] = self["webpackChunkvue3_demo_home"] || [];
/******/    chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/    chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/  })();
/******/  
/************************************************************************/
/******/  
/******/  // module cache are used so entry inlining is disabled
/******/  // startup
/******/  // Load entry module and return exports
/******/  __webpack_require__("../../node_modules/.pnpm/webpack-dev-server@5.0.4_webpack-cli@5.1.4_webpack@5.96.1/node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=3002&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=true&live-reload=true");
/******/  __webpack_require__("../../node_modules/.pnpm/webpack@5.96.1_@swc+core@1.9.2_webpack-cli@5.1.4/node_modules/webpack/hot/dev-server.js");
/******/  var __webpack_exports__ = __webpack_require__("webpack/container/entry/home");
/******/  home = __webpack_exports__;
/******/  
/******/ })()
;

3.2.3.4 main.js文件

3.2.3.4.1 源码
javascript 复制代码 
import { createApp, defineAsyncComponent } from 'vue';
import Layout from './Layout.vue';

const Content = defineAsyncComponent(() => import('home/Content'));
const Button = defineAsyncComponent(() => import('home/Button'));

const app = createApp(Layout);

app.component('content-element', Content);
app.component('button-element', Button);

app.mount('#app');
3.2.3.4.2 构建后代码
markdown 复制代码 
"use strict";
(self["webpackChunkvue3_demo_layout"] = self["webpackChunkvue3_demo_layout"] || []).push([["src_main_js"],{

/***/ "./src/main.js":
/*!*********************!*\
  !*** ./src/main.js ***!
  *********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ "webpack/sharing/consume/default/vue/vue");
/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _Layout_vue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Layout.vue */ "./src/Layout.vue");

const Content = (0,vue__WEBPACK_IMPORTED_MODULE_0__.defineAsyncComponent)(() => __webpack_require__.e(/*! import() */ "webpack_container_remote_home_Content").then(__webpack_require__.t.bind(__webpack_require__, /*! home/Content */ "webpack/container/remote/home/Content", 23)));
const Button = (0,vue__WEBPACK_IMPORTED_MODULE_0__.defineAsyncComponent)(() => __webpack_require__.e(/*! import() */ "webpack_container_remote_home_Button").then(__webpack_require__.t.bind(__webpack_require__, /*! home/Button */ "webpack/container/remote/home/Button", 23)));

const app = (0,vue__WEBPACK_IMPORTED_MODULE_0__.createApp)(_Layout_vue__WEBPACK_IMPORTED_MODULE_1__["default"]);

app.component('content-element', Content);
app.component('button-element', Button);

app.mount('#app');

/***/ })

}]);

3.2.4 过程解析

3.2.4.1 webpack异步模块的加载流程前置

前面流程跟webpack异步模块的加载流程相同，简单过一下

  1. 通过__webpack_require__("./src/index.js")，方法，同步加载入口文件index.js
  2. 执行index.js里面异步加载'src/main.js'文件的逻辑，具体执行__webpack_require__.e函数，
  3. 执行并遍历_webpack_require__.f对象上挂载的所有方法。

到遍历执行_webpack_require__.f上所有方法时，开始不同了，

👉 下一篇 ：彻底搞懂 Module Federation（中下）：MF 模块加载（下）

相关推荐
im_AMBER1 小时前
从0到1实现块级编辑器的文件导入
前端·架构
毛骗导演1 小时前
万字解析 OpenClaw 源码架构-工具与自动化
前端
毛骗导演1 小时前
万字解析 OpenClaw 源码架构-代理系统（一）
前端·架构
willow1 小时前
Webpack5基础与高级配置
webpack·性能优化
波哥学开发1 小时前
🎯 Canvas 箭头绘制算法（附完整源码）
前端·计算机图形学
拖拉斯旋风1 小时前
从零到一：用 Node.js + LangChain + Milvus 打造《天龙八部》专属 RAG 问答机器人
前端
不可能的是1 小时前
彻底搞懂 Module Federation（中下）：MF 模块加载（下）
前端·webpack
独特的账号1 小时前
前端浏览器插件的开发一步搞定
前端·react.js
李剑一1 小时前
超实用！数字孪生 Cesium 园区 3D 模型加载，一次学会的保姆级教程
前端·vue.js·cesium
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03本地部署 OpenClaw + DeepSeek-R1 完全指南04OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录05Window 10部署openclaw报错node.exe : npm error code 12806OpenClaw 接入 QQ Bot 完整实践指南07OpenClaw 飞书机器人不回复消息？3 小时踩坑总结08npm-error code 128问题解决方法09OpenClaw macOS 完整安装与本地模型配置教程（实战版）10OpenClaw + 飞书（Feishu）环境搭建指南