1. 项目准备

至少创建两个项目，分别作为容器应用（承载其他微应用）和远程应用（可被容器应用或其他应用引用） 。比如命名为 container - app 和 remote - app 。

2. 安装依赖

在每个项目的根目录下，安装必要的 Webpack 相关依赖：

npm install webpack webpack-cli html - webpack - plugin webpack - dev - server - D

这些是开发时依赖，用于项目构建和开发服务器启动等功能。

3. 配置远程应用（以 remote - app 为例）

在 webpack.config.js 中进行如下配置：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    // 其他常规配置...
    plugins: [
        new ModuleFederationPlugin({
            name: '远程应用名称', // 此应用对外暴露的名称，在其他应用引用时会用到
            filename: '远程入口文件名.js', // 生成的远程入口文件，包含暴露模块信息
            exposes: {
                // 暴露模块的路径映射
                './ModuleName': './src/具体模块路径', 
            },
            shared: {
                // 共享依赖配置，可指定共享的包及版本策略
                // 例如：'react': { requiredVersion: false }, 
            }
        })
    ]
};

4. 配置容器应用（以 container - app 为例）

同样在 webpack.config.js 中配置：

const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
    // 其他常规配置...
    plugins: [
        new ModuleFederationPlugin({
            name: '容器应用名称',
            remotes: {
                // 引入远程应用配置，格式为：远程应用别名: '远程应用名称@远程应用资源地址'
                // 例如：'remoteAppAlias': '远程应用名称@http://远程应用地址/远程入口文件名.js' 
            },
            shared: {
                // 共享依赖配置，与远程应用类似
                // 如：'react': { requiredVersion: false }, 
            }
        })
    ]
};

5. 构建应用

在远程应用和容器应用的项目目录下，分别运行构建命令：

npx webpack

构建完成后，远程应用会生成包含暴露模块信息的 remoteEntry.js 等文件 ；容器应用也会完成自身构建并准备好加载远程模块。

6. 在容器应用中使用远程模块

在容器应用的代码中，使用动态导入来加载远程模块：

// 假设在某个组件中
async function loadRemoteModule() {
    const remoteModule = await import('remoteAppAlias/./ModuleName');
    // 这里可使用导入的远程模块，如调用模块中的函数等
    remoteModule.default.someFunction(); 
}

7. 开发服务器运行（可选）

为方便开发调试，可在容器应用和远程应用中分别启动开发服务器：

npx webpack - dev - server

在实际项目中，还需考虑以下方面：

• 路由配置：合理配置容器应用和远程应用的路由，确保模块加载和页面跳转正常 。比如使用 React Router 等路由库进行配置。
• 错误处理：在模块加载过程中，处理可能出现的网络错误、模块未找到等异常情况 ，提高应用稳定性。
• 版本管理：对于共享依赖，要仔细管理版本，避免版本冲突 。可在 shared 配置中明确依赖版本要求，或使用工具辅助版本管理。