Module Federation: Micro-frontends con Webpack 5

Tue, 09 Jul 2024 00:00:00 +0900

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.

Micro-Frontends on Commentary of Takao

Module Federation: Micro-frontends con Webpack 5

Cómo funciona

Configuración expósitor

Configuración consumidor