Module Federation 동작 방식

• main.js

  • 최초 앱 초기화
  • 가장 상위의 마이크로앱의 HTML 에서 머저 불러와지는 청크
  • 브라우저에서도 앱을 최초로 로드하는데 필요한 코드를 갖고 있음.

• remoteEntry.js

  • 리모트앱을 초기화하는 청크.
  • 특정 마이크로앱에서 다른 마이크로앱을 import 할 때 가장 먼저 불리는 청크

• 위의 두 청크가, 리모트앱과 호스트앱에 대한 런타임 처리 코드를 갖고 있다.

host app 청크에 포함된 일

module.exports = new Promise((resolve, reject) => {

if(typeof microApp !== "undefined") return resolve();
__webpack_require__.l("http://localhost:3002/remoteEntry.js", (event) => {
if(typeof microApp !== "undefined") return resolve();

...
}, "microApp");
}).then(() => (microApp));