# module-federation4
**Repository Path**: mirrors_alibaba/module-federation4
## Basic Information
- **Project Name**: module-federation4
- **Description**: Webpack5 module federation for Webpack4
- **Primary Language**: Unknown
- **License**: BSD-3-Clause
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-08-08
- **Last Updated**: 2025-09-27
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
[](https://travis-ci.org/alibaba/module-federation4)
## module-federation4
`webpack-plugin-module-federation` for Webpack4, backport from https://github.com/ScriptedAlchemy/webpack-external-import
## State
not production ready at present.
## 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({
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({
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 (
<>
This app loads the heading above from website2, and doesnt expose
anything itself.
);
};
```
## Exmaple
See [examples here](./examples).
```shell
git clone
yarn install
yarn build
yarn install:example
yarn dev:example
```
Open http://localhost:3001
## Preview
