close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页performance.removeMomentLocale

#moduleFederation.options

  • 类型: Rspack.ModuleFederationPluginOptions
  • 默认值: undefined

用于配置 Rspack 模块联邦插件(对应模块联邦 v1.5)。

TIP

模块联邦的实现有多个版本。在使用 moduleFederation.options 之前,请阅读 模块联邦指南 来了解不同版本之间的差异,以及如何进行选择,

#介绍

在使用模块联邦时,我们推荐你使用 Rsbuild 提供的 moduleFederation.options 选项,这个选项会自动调整一些相关的配置,以保证模块联邦应用可以正确运行。

当你设置 moduleFederation.options 选项后,Rsbuild 会执行以下操作:

  • 自动注册 ModuleFederationPlugin 插件,并将 options 的值透传给插件。
  • 将 provider 的 dev.assetPrefix 配置的默认值设置为 true,这可以确保 remote modules 的静态资源 URL 是正确的。
  • 将 Rspack output.uniqueName 配置的默认值设置为 moduleFederation.options.name,使 HMR 可以正常工作。
  • 关闭 Rsbuild performance.chunkSplit 中 split-by-experience 相关的规则,因为这可能会与 shared modules 冲突,参考 #3161。
  • 关闭 remote entry 的 splitChunks 规则。

#用法

moduleFederation.options 的类型与 Rspack 的 ModuleFederationPlugin 插件完全一致:

rsbuild.config.ts
export default defineConfig({
  moduleFederation: {
    options: {
      name: 'remote',
      // other options
    },
  },
});

请参考 ModuleFederationPlugin 文档来了解所有可用的选项。

#示例

下面是一个最小示例:

  • Remote App
remote/rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  server: {
    port: 3002,
  },
  moduleFederation: {
    options: {
      name: 'remote',
      exposes: {
        './Button': './src/Button',
      },
      filename: 'remoteEntry.js',
    },
  },
});
  • Host App
host/rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  server: {
    port: 3002,
  },
  moduleFederation: {
    options: {
      name: 'host',
      remotes: {
        remote: 'remote@http://localhost:3002/remoteEntry.js',
      },
    },
  },
});

更多示例请查看:

  • Rsbuild - module-federation example
  • module-federation/module-federation-examples