#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.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:

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.