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'],
    }),
  ],
});

クイックチェック

まとめ