MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

        以Module Federation 插件详为例，Webpack.config.js它可能的配置和含义如下：

前言

Module Federation 的Webpack.config.js核心配置包括：

1. name + filename（定义应用标识）

2. remotes（引用远程模块）

3. exposes（暴露本地模块）

4. shared（共享依赖，优化加载）

 Host应用中：

// host/webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const webpack = require('webpack');module.exports = {// 📦 模式：development（开发）或 production（生产）mode: 'development',// 📂 构建入口：Webpack 构建从这里开始entry: './src/index.js',// 📤 构建输出output: {// 构建目录（dist 文件夹）path: path.resolve(__dirname, 'dist'),// 输出 JS 文件名（可以使用哈希做缓存）filename: '[name].[contenthash].js',// 所有静态资源的基础路径，必须指向 devServer 地址（用于加载 remote）publicPath: 'http://localhost:3000/',// 每次构建自动清空 dist 文件夹clean: true,},// 🌐 Dev Server 本地开发服务器配置devServer: {port: 3000, // 主机端口static: {directory: path.join(__dirname, 'dist'), // 静态资源路径},compress: true, // 启用 gzip 压缩hot: true, // 启用模块热替换historyApiFallback: true, // SPA 路由兼容open: true, // 启动时自动打开浏览器client: {overlay: true, // 编译错误以浮层形式显示},},// 📚 Source Map（方便调试）devtool: 'eval-source-map',// 📦 模块加载规则module: {rules: [{test: /\.js$/, // 匹配 JS 文件exclude: /node_modules/,use: 'babel-loader', // 使用 Babel 编译},{test: /\.css$/, // 匹配 CSS 文件use: ['style-loader', 'css-loader'], // 加载样式},{test: /\.(png|jpg|gif|svg)$/, // 图片加载type: 'asset/resource', // 转成文件资源},],},// 🔧 模块解析配置resolve: {extensions: ['.js', '.jsx', '.json'], // 自动补全扩展名alias: {'@': path.resolve(__dirname, 'src'), // 设置路径别名},modules: [path.resolve(__dirname, 'src'), 'node_modules'], // 优先搜索路径},// 🎯 性能提示控制performance: {hints: false, // 不提示 bundle 过大},// ⚙️ 缓存配置cache: {type: 'filesystem', // 文件系统缓存（构建更快）},// 💡 Webpack 插件plugins: [// 自动生成 HTML 页面，并注入输出的 JS 脚本new HtmlWebpackPlugin({template: './public/index.html',favicon: './public/favicon.ico',}),// 允许定义全局变量（编译时替换）new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),}),// 🌐 模块联邦核心插件new ModuleFederationPlugin({// 当前应用唯一标识name: 'host',// 使用远程模块的声明remotes: {remote1: 'remote1@http://localhost:3001/remoteEntry.js',remote2: 'remote2@http://localhost:3002/remoteEntry.js',},// 如果你要暴露本地组件（可选）exposes: {'./LocalComponent': './src/components/LocalComponent.js',},// 共享模块（版本控制、避免重复加载）shared: {react: {// 必须的库名称requiredVersion: '^17.0.0',// 是否单例模式（防止重复加载）singleton: true,// 是否立即加载（false为异步）eager: true,// 允许的版本范围version: '17.0.2',// 严格版本检查strictVersion: false,// 共享作用域名称shareScope: 'default'}},}),],// 🧠 优化配置（可选）optimization: {// 代码分割：把 node_modules 拆出来splitChunks: {chunks: 'all', // 所有模块分割},runtimeChunk: 'single', // 单独抽出运行时代码moduleIds: 'deterministic', // 稳定 moduleId，有利于长期缓存},// 🌍 目标环境（默认是 web）target: 'web',
};

Remote 应用的配置：

new ModuleFederationPlugin({name: 'remote1',filename: 'remoteEntry.js', //定义远程入口文件的名称，默认值: remoteEntry.jslibrary: { type: 'var', name: 'app1' },  //定义如何暴露模块exposes: {'./Button': './src/components/Button.js',},shared: {lodash: {singleton: true,import: 'lodash', // 精确指定导入包名eager: true, // 提前加载，避免延迟加载风险},react: { singleton: true, requiredVersion: '^18.2.0' },},
});

跟host应用的稍微差别，主要体现在下面两个属性：

• filename(字符串)

  • 定义远程入口文件的名称

  • 默认值: remoteEntry.js

  • 示例: filename:remoteEntry.js 

  • 注意区分这个属性与下面表格中的output.filename，output.filename的全称是module.output.filename，但是这个属性的全称是module.filename

• library (对象)

  • 定义如何暴露模块

  • 常用配置:

    library: {type: 'var',name: 'app1'
    }

  • type：暴露类型，可选值有var, module, assign, this, window, self, global, commonjs, commonjs2, amd, amd-require, umd, umd2, jsonp

  • name：暴露的全局变量名

总结表：

• 常用属性总结：

• 共享模块属性总结：