alibaba / module-federation4 Goto Github PK

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'
            },
        }),
    ]
};

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'
            },
        }),
    ]
};

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 />
		</>
	);
};