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.
npm install --save-dev module-federation-plugin// 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',
// },
}),
],
}You can use the shortcut syntax in webpack v5.
// 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.
// 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>
<head>
<script src="http://localhost:3002/remoteEntry.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>You can use the import() call to reference these modules.
import('@website-2/foo')
.then(({ xyz }) => {
// ...
})In addition to the module federation itself, this plugin also provides the additionalFeatures option to support some additional features.
An asyncChunkMode option can be passed to the plugin to specify the default chunk mode of remote modules.
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')
module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
additionalFeatures: {
asyncChunkMode: 'eager',
},
}),
],
}// 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 chunksBy default, an asynchronous module will be replaced with a synchronous one after loaded. This may be useful if you prefer static imports.
// 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'))// 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.
// webpack.config.js
const { ModuleFederationPlugin } = require('module-federation-plugin')
module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
additionalFeatures: {
keepAsync: true,
},
}),
],
}Simply perform the following steps in sequence:
- Modify the import path of the plugin.
+ const { ModuleFederationPlugin } = require('webpack').container
- const { ModuleFederationPlugin } = require('module-federation-plugin')- Remove the
additionalFeaturesoption and modify the code that depends on these features.
module.exports = {
plugins: [
new ModuleFederationPlugin({
// ...
- additionalFeatures: {/* ... */},
}),
],
}- Run and test to confirm that the relevant functions are working properly.