module-federation-plugin

module-federation-plugin

Module federation for webpack@4.

This project is forked from alibaba/module-federation4.

WARNING: This package is not yet stable and implements only a very limited number of features in the standard module federation. Please take special care before using it in a production environment.

Usage

``shell
npm install --save-dev module-federation-plugin
`

$3

`js
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')

module.exports = {
output: {
publicPath: 'http://localhost:3002/',
},
plugins: [
new ModuleFederationPlugin({
name: 'website-2',
filename: 'remoteEntry.js',
exposes: {
foo: './src/foo.js',
},
// library: {
// type: 'var',
// name: 'website-2',
// },
}),
],
}
`

$3

You can use the shortcut syntax in webpack v5.

`js
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')

module.exports = {
output: {
publicPath: 'http://localhost:3001/',
},
plugins: [
new ModuleFederationPlugin({
name: 'website-1',
remotes: {
'@website-2': 'website-2@http://localhost:3002/',
},
// remoteType: 'script',
}),
],
}
`

Or you can reference the container entry file in the HTML entry manually.

`js
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')

module.exports = {
output: {
publicPath: 'http://localhost:3001/',
},
plugins: [
new ModuleFederationPlugin({
name: 'website-1',
remotes: {
'@website-2': 'website-2',
},
remoteType: 'global',
}),
],
}
`

`html










`

You can use the import() call to reference these modules.

`js
import('@website-2/foo')
.then(({ xyz }) => {
// ...
})
`

Additional Features

In addition to the module federation itself, this plugin also provides the additionalFeatures option to support some additional features.

$3

An asyncChunkMode option can be passed to the plugin to specify the default chunk mode of remote modules.

`js
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')

module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
additionalFeatures: {
asyncChunkMode: 'eager',
},
}),
],
}
`

`js
// In this case the following code
import('@website-2/foo')

// will be equivalent to
import(/ webpackMode: 'eager' /'@website-2/foo')

// which will not create extra asynchronous chunks
`

$3

By default, an asynchronous module will be replaced with a synchronous one after loaded. This may be useful if you prefer static imports.

`js
// In the entry file
import('@website-2/foo').then(() => import(/ webpackMode: 'eager' /'/path/to/the-real-entry-file'))

// OR
// import('@website-2/foo').then(() => require('/path/to/the-real-entry-file'))
`

`js
// In the real entry file
import { MyComponent } from '@website-2/foo';
`

A keepAsync option can be passed to the plugin if you wish to disable the feature.

`js
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')

module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
additionalFeatures: {
keepAsync: true,
},
}),
],
}
`

Migrate to webpack>=5

Simply perform the following steps in sequence:

1. Modify the import path of the plugin.

`diff
+ const { ModuleFederationPlugin } = require('webpack').container
- const { ModuleFederationPlugin } = require('module-federation-plugin')
`

2. Remove the additionalFeatures option and modify the code that depends on these features.

`diff
module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
- additionalFeatures: {/ ... /},
}),
],
}
``

3. Run and test to confirm that the relevant functions are working properly.