如何在React的Module Federation中共享CSS、图片等资源？

下面是亲测有效的实现方案，涵盖基础配置、CSS共享、静态资源共享及注意事项：

一、先搭好Module Federation基础结构 #

不管共享什么资源，先确保Host和Remote项目的Webpack配置正确：

Remote项目配置示例 #

// remote项目 webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {}, // 后续添加资源暴露规则
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

Host项目配置示例 #

// host项目 webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js' // 替换为Remote的实际部署地址
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

二、共享CSS资源 #

有两种实用方式：

方式1：统一导出样式模块（推荐） #

在Remote项目中创建一个样式入口文件，集中导入所有需要共享的CSS：

// remote项目 src/shared-styles.js
import './styles/global.css';
import './styles/button.css';

然后在Remote的Webpack配置中暴露这个模块：

// remote项目 webpack.config.js -> exposes
exposes: {
  './shared-styles': './src/shared-styles.js'
}

在Host项目的入口或组件中直接导入：

// host项目 src/index.js
import 'remoteApp/shared-styles';

方式2：直接暴露单个CSS文件 #

如果只需要共享单个CSS文件，可直接暴露：

// remote项目 webpack.config.js -> exposes
exposes: {
  './global.css': './src/styles/global.css'
}

Host中导入使用：

import 'remoteApp/global.css';

注意：确保两边Webpack的CSS Loader配置一致（如css-loader、style-loader），避免解析差异。

三、共享图片等静态资源 #

核心是把资源作为模块暴露，让Host通过模块引用获取资源路径：

步骤1：在Remote中暴露资源模块 #

在Remote项目中创建资源导出文件：

// remote项目 src/shared-assets.js
// Webpack5可直接用import，Webpack4需用require
export const logo = require('./assets/logo.png').default;
export const background = require('./assets/bg.jpg').default;

然后在Remote的Webpack配置中暴露该模块：

// remote项目 webpack.config.js -> exposes
exposes: {
  './shared-assets': './src/shared-assets.js'
}

步骤2：在Host中使用资源 #

在React组件中导入并使用：

import { logo } from 'remoteApp/shared-assets';

function App() {
  return (
    <div>
      <img src={logo} alt="Remote Logo" />
    </div>
  );
}
export default App;

Webpack5用户需确保Asset模块配置正确，资源会被自动处理为URL或Base64。

四、关键注意事项 #

• 样式冲突：全局样式易冲突，建议用CSS Modules或CSS-in-JS（如styled-components）做样式隔离。
• 资源路径：生产环境避免用相对路径，Webpack会自动处理为正确的部署URL。
• 版本兼容：Module Federation在Webpack5才稳定，建议Host和Remote都用Webpack5及以上版本。
• 缓存刷新：更新共享资源后，通过Webpack的contenthash生成带哈希的文件名，避免缓存问题。

内容的提问来源于stack exchange，提问作者Jose Enrique Lopez