❤
npm
Sign UpSign In

webpack-plugin-module-federation

1.0.0-beta-1 • Public • Published

module-federation4

webpack-plugin-module-federation for Webpack4.

Usage

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

Configure your webpack.config.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.

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>
    <head>
        <script src="http://localhost:3002/remoteEntry.js"></script> 
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Then use dynamic import

import React, { lazy, Suspense, useState } from 'react';
import Footer from './Footer';
 
const Title = lazy(() => import('website2/Title')); // federated
 
export default () => {
    return (
        <>
            <Suspense fallback={'fallback'}>
                <Title />
            </Suspense>
            <p>
                This app loads the heading above from website2, and doesnt expose
                anything itself.
            </p>
            <Footer />
        </>
    );
};

Exmaple

See examples here.

Preview

preview

Readme

Keywords

none

Package Sidebar

Install

npm i webpack-plugin-module-federation

Weekly Downloads

69

Version

1.0.0-beta-1

License

ISC

Unpacked Size

53.8 kB

Total Files

16

Last publish

Collaborators

  • xcodebuild
Try on RunKit
Report malware