Webpack 5의 Module Federation

Module Federation 개요

역할: 호스트와 리모트

리모트 구성

// Remote: apps/products/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'products',              // remote name
      filename: 'remoteEntry.js',    // entry file
      exposes: {
        './ProductCard': './src/components/ProductCard', // exposed module
        './CartButton': './src/components/CartButton',
      },
      shared: ['react', 'react-dom'], // share deps to avoid duplication
    }),
  ],
};

호스트 구성

// Host: apps/shell/webpack.config.js
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    products: 'products@http://localhost:3001/remoteEntry.js',
    cart: 'cart@http://localhost:3002/remoteEntry.js',
  },
  shared: ['react', 'react-dom'],
})

리모트 모듈 사용

import React, { lazy, Suspense } from 'react';

const ProductCard = lazy(() => import('products/ProductCard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductCard productId="123" />
    </Suspense>
  );
}

의존성 공유

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  '@company/design-system': { singleton: true },
},

리모트 동적 로드

async function loadRemote(scope, module) {
  await __webpack_init_sharing__('default');
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get(module);
  return factory();
}

const ProductCard = React.lazy(() => loadRemote('products', './ProductCard'));

Module Federation에서 TypeScript 사용

리모트 실패를 위한 오류 경계

<ErrorBoundary fallback={<div>Product unavailable</div>}>
  <Suspense fallback={<Skeleton />}>
    <ProductCard productId={id} />
  </Suspense>
</ErrorBoundary>

Vite Module Federation

// vite.config.ts (remote)
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'products',
      filename: 'remoteEntry.js',
      exposes: { './ProductCard': './src/ProductCard' },
      shared: ['react'],
    }),
  ],
});

빠른 확인

복습