#Webpack Plugin

• 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 add @module-federation/enhanced

#Create module-federation.config.js

Create a module-federation.config.js file with the following content:

module.export = {
  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:

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.