💡 핵심 요약 (Executive Summary)
본 가이드는 js config build rsbuild.config.ts 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다.
📑 Table of Contents
For ModuleFederation-Enhanced
Producer (Provider, Remote)
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
export default defineConfig({
server: {
port: 3000,
},
dev: {
// It is necessary to configure assetPrefix, and in the production build, you need to configure output.assetPrefix
assetPrefix: 'http://localhost:3000',
},
tools: {
rspack: (config, { appendPlugins }) => {
// You need to set a unique value that is not equal to other applications
config.output!.uniqueName = 'federation_provider';
appendPlugins([
new ModuleFederationPlugin({
name: 'federation_provider',
exposes: {
'./button': './src/Button.tsx',
},
shared: ['react', 'react-dom'],
}),
]);
},
},
plugins: [pluginReact()],
});Consumer (Host)
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
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()],
});For ModuleFederation
Remote
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mfConfig } from './module-federation.config';
export default defineConfig({
plugins: [pluginReact()],
server: {
port: 3002,
},
moduleFederation: {
options: mfConfig,
},
});Remote – module-federation.config.ts
bash
import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';
export const mfConfig: Rspack.ModuleFederationPluginOptions = {
name: 'remote',
exposes: {
'./Button': './src/Button',
},
filename: 'remoteEntry.js',
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
};Host
ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { mfConfig } from './module-federation.config';
export default defineConfig({
plugins: [pluginReact()],
server: {
port: 3000,
},
moduleFederation: {
options: mfConfig,
},
});Host – module-federation.config.ts
bash
import { dependencies } from './package.json';
import type { Rspack } from '@rsbuild/core';
export const mfConfig: Rspack.ModuleFederationPluginOptions = {
name: 'host',
remotes: {
remote: 'remote@http://localhost:3002/remoteEntry.js',
},
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies.react,
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom'],
},
},
};
Leave a Reply