模块联邦基本入门

模块联邦是什么

webpack5提出的一个新概念，module federation， 允许运行资源和代码在多个应用之间共享，并且可以单独打包部署；只要用ModuleFederationPlugin声明exports模块， 在另外一个应用中ModuleFederationPlugin声明的remotes导入模块，就可以直接用别的应用模块了。

但是需要注意：加载的时候需要用异步加载import('')

模块联邦概念发展历史

• 2018年，webpack4提出module hook的内容，为后续module federation奠定基础；
• 2019年，webpack5正式引入module federation功能；

基本使用

• 只要用ModuleFederationPlugin声明exports模块， 在另外一个应用中ModuleFederationPlugin声明的remotes导入模块，就可以直接用别的应用模块了。

提供者

• 提供一个button组件供其他应用使用

export default defineConfig({
  server: {
    port: 3000,
  },
  dev: {
    // 必须要配置 assetPrefix，在生产环境需要配置 output.assetPrefix
    assetPrefix: 'http://localhost:3000',
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      // 需要设置一个唯一值不能和其他应用相等
      config.output!.uniqueName = 'federation_provider';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'federation_provider',
          exposes: {
            './button': './src/button.tsx',
          },
          shared: ['react', 'react-dom'],
        }),
      ]);
    },
  },
  plugins: [pluginReact()],
});

消费者

• 消费其他应用提供的button组件

export default defineConfig({
  server: {
    port: 2000,
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'federation_consumer',
          remotes: {
            federation_provider:
              'federation_provider@http://localhost:3000/mf-manifest.json',
          },
          shared: ['react', 'react-dom'],
        }),
      ]);
    },
  },
  plugins: [pluginReact()],
});

在微前端的使用

• qiankun 属于开箱即用的微前端解决方案；包括依赖隔离，预加载等；
• MF是属于去中心化的微前端方案，就各个模块之间都是可以导出或者引入模块的;