Webpack

Capable de building módulos esse meet o Module Federation carregamento specification.
Capable de consuming módulos do Module Federation specification usando aliases.
Capable de setting o dependência compartilhada configuração for módulos. Quando o host environment onde o módulo é carregado já has o corresponding dependência, it vai não ser carregado repeatedly.
Quando um módulo has uma remote tipo, o tipo do módulo remoto vai ser automatically baixadas for consumption.
Hot-reloading capability quando consuming módulos remotos.

Início rápido

Instalação

Você pode instale o plugin com o seguintes comando:

npm

yarn

pnpm

bun

npm add @module-federation/enhanced

Crie module-federation.configuração.js

Crie uma module-federation.configuração.js arquivo com o seguintes content:

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,
    },
  },
};

Register Plugin

In Webpack, você pode adicione o plugin por meio do plugins configuração item no webpack.config.js configuração arquivo:

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

Configuração

Você pode find detailed descriptions de all configuração items no Config Overview page.

#Webpack

#Início rápido

#Instalação

#Crie module-federation.configuração.js