Webpack

Capable of building modules that meet the Module Federation loading specification.
Capable of consuming modules of the Module Federation specification using aliases.
Capable of setting the shared dependency configuration for modules. When the host environment where the module is loaded already has the corresponding dependency, it will not be loaded repeatedly.
When a module has a remote type, the type of the remote module will be automatically downloaded for consumption.
Hot-reloading capability when consuming remote modules.

Quick Start

Installation

You can install the plugin with the following command:

npm

yarn

pnpm

bun

npm add @module-federation/enhanced

Create module-federation.config.js

Create a module-federation.config.js file with the following 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, you can add the plugin through the plugins configuration item in the webpack.config.js configuration file:

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

Configuration

You can find detailed descriptions of all configuration items on the Config Overview page.

#Webpack

#Quick Start

#Installation

#Create module-federation.config.js