Featured image of post Module Federation: Micro-frontends con Webpack 5Featured image of post Module Federation: Micro-frontends con Webpack 5

Module Federation: Micro-frontends con Webpack 5

Deep dive into Webpack 5 Module Federation for micro-frontends. Learn shared dependencies, remote containers, versioning, fallbacks, and deployment patterns.

Module Federation permite cargar código JavaScript desde otra aplicación en tiempo de ejecución. Es la base de los micro-frontends modernos.

Cómo funciona

Una aplicación expone módulos via ModuleFederationPlugin. Otra aplicación los consume como si fueran locales. Los módulos compartidos se cargan una sola vez.

Configuración expósitor

new ModuleFederationPlugin({
  name: 'app1',
  exposes: { './Button': './src/Button' },
  shared: { react: { singleton: true } }
})

Configuración consumidor

remotes: { app1: 'app1@http://...' }. Importa import('app1/Button'). React y otras librerías compartidas como singletons.

Alternativas modernas

Vite Module Federation via @originjs/vite-plugin-federation. Import Maps nativos. Bit para componentes independientes.