webpack-plugin-module-federation

module-federation4

webpack-plugin-module-federation for Webpack4.

Usage

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

Configure your webpack.config.js

`js
const moduleFederationPlugin = require('webpack-plugin-module-federation');

module.exports = {
output: {
publicPath: 'http://localhost:3002/',
},
plugins: [
new moduleFederationPlugin({
new ModuleFederationPlugin({
name: '_federation_website2',
library: 'website2',
filename: 'remoteEntry.js',
libraryTarget: 'global',
remotes: {
'website1': 'website1'
},
expose: {
Title: './src/Title',
App: './src/App'
},
}),
});
]
};
`

Import module from remote

In remote project, configure webpack.config.js.

`js
const moduleFederationPlugin = require('webpack-plugin-module-federation');

module.exports = {
output: {
publicPath: 'http://localhost:3001/',
},
plugins: [
new moduleFederationPlugin({
new ModuleFederationPlugin({
name: '_federation_website1',
library: 'website1',
filename: 'remoteEntry.js',
libraryTarget: 'global',
remotes: {
'website2': '_federation_website2'
},
expose: {
App: './src/App'
},
}),
});
]
};
`

Add remoteEntry in your HTML

`html










`

Then use dynamic import

`jsx
import React, { lazy, Suspense, useState } from 'react';
import Footer from './Footer';

const Title = lazy(() => import('website2/Title')); // federated

export default () => {
return (
<>