Webpack

Permite construir módulos que cumplen la especificación de carga de Module Federation.
Permite consumir módulos de la especificación Module Federation mediante alias.
Permite definir la configuración de dependencias compartidas de los módulos. Si el entorno host en el que se carga el módulo ya tiene la dependencia correspondiente, no se volverá a cargar.
Cuando un módulo tiene tipos remotos, los tipos del módulo remoto se descargan automáticamente para su consumo.
Recarga en caliente (hot reload) al consumir módulos remotos.

Inicio rápido

Instalación

Puedes instalar el plugin con el siguiente comando:

npm

yarn

pnpm

bun

npm add @module-federation/enhanced

Crear module-federation.config.js

Crea un archivo module-federation.config.js con el siguiente contenido:

module-federation.config.js

module.exports = {
  name: 'host',
  remotes: {
    provider: 'provider@http://localhost:2004/mf-manifest.json',
  },
  exposes: {
    './Button': './src/components/Button.tsx',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
};

Registrar el plugin

En Webpack, puedes añadir el plugin mediante la opción plugins del archivo de configuración webpack.config.js:

webpack.config.js

const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/webpack');
const mfConfig = require('./module-federation.config');

module.exports = {
  devServer: {
    port: 2000,
  },
  output: {
    publicPath: 'http://localhost:2000/',
  },
  plugins: [new ModuleFederationPlugin(mfConfig)],
};

Configuración

Encontrarás descripciones detalladas de todas las opciones de configuración en la página Resumen de la configuración.

#Webpack

#Inicio rápido

#Instalación

#Crear module-federation.config.js