What does `eager` mean in webpack module federation? What's the relationship between initialConsumes and chunkMapping?

Viewed 1154

After I integrated webpack module federation into our project, I'm still confused by it. Anyone can explain what eager exactly means? Also what's the relationship between initialConsumes and chunkMapping? Seems when I set eager as true, the app will wait all chunkMapping promises to finish before import modules in initialConsumes? It's hard to make sense of all of these...

var initialConsumes = ["webpack/sharing/consume/default/react/react?0106"];
/******/        initialConsumes.forEach((id) => {
/******/            __webpack_require__.m[id] = (module) => {
/******/                // Handle case when module is used sync
/******/                installedModules[id] = 0;
/******/                delete __webpack_require__.c[id];
/******/                var factory = moduleToHandlerMapping[id]();
/******/                if(typeof factory !== "function") throw new Error("Shared module is not available for eager consumption: " + id);
/******/                module.exports = factory();
/******/            }
/******/        });
/******/        var chunkMapping = {
/******/            "web_static_js_bootstrap_tsx-webpack_sharing_consume_default_react_react-webpack_sharing_consu-28c1dc": [
/******/                "webpack/sharing/consume/default/react/react?4218",
/******/                "webpack/sharing/consume/default/react-dom/react-dom",
/******/                "webpack/sharing/consume/default/react/react?f8d7",
/******/                "webpack/sharing/consume/default/react/react?6b37",
/******/                "webpack/sharing/consume/default/react/react?04cc",
/******/                "webpack/sharing/consume/default/react/react?f68a"
/******/            ]
/******/        };

Also why should I care about remote module during initialConsumes?

var promises = [];
/******/            switch(name) {
/******/                case "default": {
/******/                    register("react-dom", "16.14.0", () => (() => (__webpack_require__(/*! ./node_modules/react-dom/index.js */ "./node_modules/react-dom/index.js"))), 1);
/******/                    register("react", "16.14.0", () => (() => (__webpack_require__(/*! ./node_modules/react/index.js */ "./node_modules/react/index.js"))), 1);
/******/                    initExternal("webpack/container/reference/mobileFederated");
/******/                }
/******/                break;
/******/            }
/******/            if(!promises.length) return initPromises[name] = 1;
0 Answers
Related