#Remotes

• Type: PluginRemoteOptions
• Required: No
• Default: undefined
• Usage: Used for consuming remote modules in Module Federation

The PluginRemoteOptions type is as follows:

type ModuleFederationInfo = string;
type ShareScope = string | string[];

type RemoteConfig = {
  external: ModuleFederationInfo | ModuleFederationInfo[];
  shareScope?: ShareScope;
};

interface PluginRemoteOptions {
  [remoteAlias: string]: ModuleFederationInfo | RemoteConfig;
}

• remoteAlias is the name actually used for reference by the consumer and can be configured as needed. For example, if remoteAlias is set to demo, then the consumption method would be import xx from 'demo'.
• ModuleFederationInfo is composed of ModuleFederation name + @ + ModuleFederation entry
  • ModuleFederation name is the name set by the producer
  • entry can be either mf-manifest.json or remoteEntry.js
  • When entry is mf-manifest.json, it has the following additional capabilities:
    • Dynamic module type hints
    • Resource preloading
    • Chrome devtool debugging tool

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      // The `remotes` below defines two remotes, named `manifest-provider` for the project started on port 3011 and `js-entry-provider` for the project started on port 3012
      remotes: {
        'manifest-provider':
          'manifest_provider@http://localhost:3011/mf-manifest.json',
        'js-entry-provider':
          'js_entry_provider@http://localhost:3012/remoteEntry.js',
      },
    }),
  ],
};

#shareScope

• Type: string | string[]
• Required: No
• Default: 'default'

Defines which share scopes (shared dependency pools) the host aligns with a given remote. This is useful for isolating certain shared dependencies away from the default pool (for example, putting an internal design system into scope1 while keeping React in default).

new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    remote: {
      external: 'app_remote@http://localhost:2001/remoteEntry.js',
      shareScope: ['default', 'scope1'],
    },
  },
});

Related configuration:

• The producer (remote) should declare which scopes it initializes via shareScope.
• Each shared dependency chooses its scope via shared.shareScope.