Module Federation

개인적으로 생각했을때 강력한 micro frontend Architecture 를 구성할 수 있는 방식인 것 같습니다.
 
webpack에서 지원하는 해당 모듈이며
외부 프로젝트의 모듈을 공유하여 사용 할 수 있습니다
 
모듈들을 독립적으로 관리가 가능하고 코드 전체를 빌드할 필요가 없어져 빌드 시간이 줄어들것으로 기대됩니다.
 
구성하는 방식은 간단합니다.
 
webpack설정 파일에서 구성을 합니다.
 
모듈을 내보내는 프로젝트에서는 아래와 같이 exposes에 내보낼 모듈을 지정해서 내보낼수있습니다.

    new ModuleFederationPlugin({
      name: "app2", // 전체 모듈의 이름
      filename: "moduleEntry.js", //빌드시 생성되는 파일의 이름을 지정
      exposes: { // 공유할 모듈을 선정합니다 
        "./App": "./src/App",
        "./Button": "./src/Button",
      },
      shared: {
    	//공유할 종속성을 지정합니다 
        },
      },

 
 
모듈을 받는 프로젝트에서는 아래와 같이 remotes에 공유된 모듈을 연결할 수 있습니다.

new ModuleFederationPlugin({
      name: "app1",
      remotes: { 
        app2: "app2@[app2의 배포주소]/moduleEntry.js",
      },
      shared: {
      	//공유할 종속성을 지정합니다
      },
    }),

 
 
이후 모듈이 필요한곳에서 해당 모듈을 import 해서 사용가능합니다.
 

import moduleApp from "app2/App";

 
 
해당구성을 하면서 가장 에러를 많이 발생시킨부분은 
index.js를 아래와 같이 설정하고 

import("./파일이름");

 
 
파일이름.js를 기존 index.js 처럼 제작해야한다는 점입니다.

import App from "./App";
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<App/>, document.getElementById("root"));

 
 
공식문서에서도 위와같이 제작이 되어있으며 
해당 부분을 변경하면 아래와 같은 에러가 발생하게 됩니다 

Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?5e40

 
위와 같은 에러가 발생하는 이유는 종속성의 문제인데 
네트워크 탭을 보면 공유되는 모듈의 React를 요청받습니다 하지만 이전에 index.js를 로드하게 되면서 해당 모듈을 사용할수없다고 뜨게 되는 것입니다.
 
이를 해결하기위해 파일이름.js 이라는 폴더를 통해 index.js를 import 하면서 기존의 index.js의 로드를 늦추는 것입니다.