module-federation4
webpack-plugin-module-federation
for Webpack4.
Usage
npm install --save-dev webpack-plugin-module-federation
Configure your webpack.config.js
const moduleFederationPlugin = ; moduleexports = output: publicPath: 'http://localhost:3002/' plugins: 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
.
const moduleFederationPlugin = ; moduleexports = output: publicPath: 'http://localhost:3001/' plugins: name: '_federation_website1' library: 'website1' filename: 'remoteEntry.js' libraryTarget: 'global' remotes: 'website2': '_federation_website2' expose: App: './src/App' ; ;
Add remoteEntry
in your HTML
Then use dynamic import
import React lazy Suspense useState from 'react';import Footer from './Footer'; const Title = ; // federated return <> <Suspense => <Title /> </Suspense> <p> This app loads the heading above from website2 and doesnt expose anything itself </p> <Footer /> </> ;;
Exmaple
See examples here.