Webpack中的Module Federation是什么，如何使用？

翻滚的胖子
2023-08-28 11:06:48
前端技术
JavaScript PHP

Webpack中的Module Federation是一种用于组织和共享JavaScript模块的工具。它允许我们在不同的Webpack构建中共享代码，从而提高应用程序的性能和开发效率。

Module Federation的使用非常简单。我们只需在Webpack配置文件中进行一些配置，就可以在不同的应用中引用共享的模块。

使用步骤

首先，我们需要在主应用和子应用的Webpack配置文件中配置Module Federation。在主应用的配置文件中，我们需要指定要共享的模块和它们的名称：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'main_app',
      shared: { // 指定要共享的模块
        react: { // 模块的名称
          singleton: true, // 是否使用单例模式
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
};

在子应用的配置文件中，我们需要指定要使用的共享模块：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
 
module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'sub_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'], // 指定要使用的共享模块
    }),
  ],
};

代码案例

下面是一个简单的例子，演示了如何在主应用中使用子应用的共享模块：

import React from 'react';
import ReactDOM from 'react-dom';
 
// 加载子应用的共享模块
import('sub_app/Button').then((Button) => {
  ReactDOM.render(
    <button>, // 使用共享模块
    document.getElementById('root')
  );
});</button>