title: What does `eager` mean in webpack module federation? What's the relationship between initialConsumes and chunkMapping?
body: <p>After I integrated webpack module federation into our project, I'm still confused by it. Anyone can explain what <code>eager</code> exactly means? Also what's the relationship between <code>initialConsumes</code> and <code>chunkMapping</code>? Seems when I set <code>eager</code> as <code>true</code>, the app will wait all <code>chunkMapping</code> promises to finish before import modules in <code>initialConsumes</code>? It's hard to make sense of all of these...</p>
  <pre><code>var initialConsumes = [&quot;webpack/sharing/consume/default/react/react?0106&quot;];
  /******/        initialConsumes.forEach((id) =&gt; {
  /******/            __webpack_require__.m[id] = (module) =&gt; {
  /******/                // Handle case when module is used sync
  /******/                installedModules[id] = 0;
  /******/                delete __webpack_require__.c[id];
  /******/                var factory = moduleToHandlerMapping[id]();
  /******/                if(typeof factory !== &quot;function&quot;) throw new Error(&quot;Shared module is not available for eager consumption: &quot; + id);
  /******/                module.exports = factory();
  /******/            }
  /******/        });
  /******/        var chunkMapping = {
  /******/            &quot;web_static_js_bootstrap_tsx-webpack_sharing_consume_default_react_react-webpack_sharing_consu-28c1dc&quot;: [
  /******/                &quot;webpack/sharing/consume/default/react/react?4218&quot;,
  /******/                &quot;webpack/sharing/consume/default/react-dom/react-dom&quot;,
  /******/                &quot;webpack/sharing/consume/default/react/react?f8d7&quot;,
  /******/                &quot;webpack/sharing/consume/default/react/react?6b37&quot;,
  /******/                &quot;webpack/sharing/consume/default/react/react?04cc&quot;,
  /******/                &quot;webpack/sharing/consume/default/react/react?f68a&quot;
  /******/            ]
  /******/        };
  </code></pre>
  <p>Also why should I care about remote module during <code>initialConsumes</code>?</p>
  <pre><code>var promises = [];
  /******/            switch(name) {
  /******/                case &quot;default&quot;: {
  /******/                    register(&quot;react-dom&quot;, &quot;16.14.0&quot;, () =&gt; (() =&gt; (__webpack_require__(/*! ./node_modules/react-dom/index.js */ &quot;./node_modules/react-dom/index.js&quot;))), 1);
  /******/                    register(&quot;react&quot;, &quot;16.14.0&quot;, () =&gt; (() =&gt; (__webpack_require__(/*! ./node_modules/react/index.js */ &quot;./node_modules/react/index.js&quot;))), 1);
  /******/                    initExternal(&quot;webpack/container/reference/mobileFederated&quot;);
  /******/                }
  /******/                break;
  /******/            }
  /******/            if(!promises.length) return initPromises[name] = 1;
  </code></pre>