模块联邦实验

App1

// ./src/sitename.js
export default (name) => {
    console.log('这里是App1')
    const ele = document.createElement('h3')
    ele.textContent = name
    return ele
}

// ./src/index.js

import sitename from './sitename.js'
const p = sitename('app1')
document.body.appendChild(p)

// ./webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Mfb = require('webpack').container.ModuleFederationPlugin
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist'),
        clean: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new Mfb({
            name: 'app1',
            filename: 'app1.js',
            exposes: {
                './siteName': './src/sitename.js'
            }
        })
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, './dist'),
          },
        port: 3001
    }
}

App2

// ./src/index.js

import('appone/siteName').then((res)=> {
    const a = res.default('我引入的App1')
    document.body.appendChild(a)
})

// ./webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const Mfb = require('webpack').container.ModuleFederationPlugin
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new Mfb({
            remotes: {
                  // 引用多个就往下加
                appone: 'app1@http://localhost:3001/app1.js'
            }
        })
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, './dist'),
          },
        port: 3002
    }
}