마이크로프론트엔드 — Module Federation과 Single-SPA

Module Federation (Webpack 5)

// 호스트 앱
new ModuleFederationPlugin({
  remotes: {
    shop: "shop@http://localhost:3001/remoteEntry.js",
  },
});

// 리모트 앱
new ModuleFederationPlugin({
  name: "shop",
  filename: "remoteEntry.js",
  exposes: {
    "./ProductList": "./src/ProductList",
  },
});

사용

const ProductList = React.lazy(
  () => import("shop/ProductList")
);

팀별로 독립 배포할 수 있지만, 버전 관리와 공유 의존성에 주의가 필요합니다.