TheModuleFederationPlugin allows a build to provide or consume modules with other independent builds at runtime.

const{ ModuleFederationPlugin}=require('webpack').container;module.exports={  plugins:[newModuleFederationPlugin({// options' typings in typescript      runtime:string|false,}),],};

Options

runtime

Create a new runtime chunk with the specified name.

webpack.config.js

const{ ModuleFederationPlugin}=require('webpack').container;module.exports={  plugins:[newModuleFederationPlugin({      runtime:'my-runtime-name',}),],};

Sharing libraries

With theshared key in the configuration you can define libraries that are shared between your federated modules. The package name is the same as the one found in thedependencies section of your package.json. However, by default webpack will only share the root level of a library.

const{ ModuleFederationPlugin}=require('webpack').container;module.exports={  plugins:[newModuleFederationPlugin({// adds date-fns as shared module      shared:['date-fns'],}),],};

So in your application you could do something like

import{ format}from'date-fns';format(newDate(2014,1,11),'MM/dd/yyyy');

and webpack will automatically sharedate-fns between all your federated modules that definedate-fns as a shared library.However, if you want to access something that is not located at the root level of the package, for exampledate-fns/locale/en-GB/index.js, you need to append/ to the package name in yourshared configuration:

const{ ModuleFederationPlugin}=require('webpack').container;module.exports={  plugins:[newModuleFederationPlugin({// adds date-fns as shared module// all files of the package will be shared      shared:['date-fns/'],}),],};

The/ syntax allows you to access all files of a package. However, it should be used only where necessary, because it has an impact on performance especially indevelopment mode.

Specify package versions

There are three ways to specify the versions of shared libraries.

Array syntax

This syntax allows you to share libraries with package name only. This approach is good for prototyping, but it will not allow you to scale to large production environment given that libraries likereact andreact-dom will require additional requirements.

const{ ModuleFederationPlugin}=require('webpack').container;module.exports={  plugins:[newModuleFederationPlugin({// adds lodash as shared module// version is inferred from package.json// there is no version check for the required version// so it will always use the higher version found      shared:['lodash'],}),],};

Object syntax

This syntax provides you more control over each shared library in which you can define package name as the key and version (semver) as the value.

module.exports={  plugins:[newModuleFederationPlugin({      shared:{// adds lodash as shared module// version is inferred from package.json// it will use the highest lodash version that is >= 4.17 and < 5        lodash:'^4.17.0',},}),],};

Object syntax with sharing hints

This syntax allows you to provide additionalhints to each shared package where you define the package name as the key, and the value as an object containing hints to modify sharing behavior.

const deps=require('./package.json').dependencies;module.exports={  plugins:[newModuleFederationPlugin({      shared:{// adds react as shared module        react:{          requiredVersion: deps.react,          singleton:true,},},}),],};

Sharing hints

eager

boolean

This hint will allow webpack to include the provided and fallback module directly instead of fetching the library via an asynchronous request. In other words, this allows to use this shared module in the initial chunk. Also, be careful that all provided and fallback modules will always be downloaded when this hint is enabled.

import

false | string

The provided module that should be placed in the shared scope. This provided module also acts as fallback module if no shared module is found in the shared scope or version isn't valid. (The value for this hint defaults to the property name.)

packageName

string

The package name that is used to determine required version from description file. This is only needed when the package name can't be automatically determined from request.

requiredVersion

falsestring

This field specifies the required version of the package. It accepts semantic versioning, such as "^1.2.3". Additionally, it retrieves the version if it's provided as a URL, for instance: "git+ssh://git@github.com:foo/bar.git#v1.0.0".

shareKey

string

The requested shared module is looked up under this key from the shared scope.

shareScope

string

The name of the shared scope.

singleton

boolean

This hint only allows a single version of the shared module in the shared scope (disabled by default). Some libraries use a global internal state (e.g. react, react-dom). Thus, it is critical to have only one instance of the library running at a time.

In cases where there are multiple versions of the same dependency in the shared scope, the highest semantic version is used.

strictVersion

boolean

This hint allows webpack to reject the shared module if version is not valid (defaults totrue when local fallback module is available and shared module is not a singleton, otherwisefalse, it has no effect if there is no required version specified). Throws a runtime error if the required version is not found.

version

false | string

The version of the provided module. It allows webpack to replace lower matching versions, but not higher.

By default, webpack uses the version from thepackage.json file of the dependency.

Additional examples

module.exports={  plugins:[newModuleFederationPlugin({// adds vue as shared module// version is inferred from package.json// it will always use the shared version, but print a warning when the shared vue is < 2.6.5 or >= 3      shared:{        vue:{          requiredVersion:'^2.6.5',          singleton:true,},},}),],};

module.exports={  plugins:[newModuleFederationPlugin({// adds vue as shared module// there is no local version provided// it will emit a warning if the shared vue is < 2.6.5 or >= 3      shared:{        vue:{import:false,          requiredVersion:'^2.6.5',},},}),],};

module.exports={  plugins:[newModuleFederationPlugin({// adds vue as shared module// there is no local version provided// it will throw an error when the shared vue is < 2.6.5 or >= 3      shared:{        vue:{import:false,          requiredVersion:'^2.6.5',          strictVersion:true,},},}),],};

module.exports={  plugins:[newModuleFederationPlugin({      shared:{'my-vue':{// can be referenced by import "my-vue"import:'vue',// the "vue" package will be used as a provided and fallback module          shareKey:'shared-vue',// under this name the shared module will be placed in the share scope          shareScope:'default',// share scope with this name will be used          singleton:true,// only a single version of the shared module is allowed          strictVersion:true,// don't use shared version when version isn't valid. Singleton or modules without fallback will throw, otherwise fallback is used          version:'1.2.3',// the version of the shared module          requiredVersion:'^1.0.0',// the required version of the shared module},},}),],};

Further Reading

• Module Federation

5 Contributors