Module Federation

웹 애플리케이션 개발에서의 코드 공유

• 코드를 배포 가능한 작은 모듈 단위로 분리하여
• 분리된 모듈을 동적으로 로드

• Webpack의 Module Federation을 이용
  • expose option
    • 특정 모듈을 다른 애플리케이션에 노출
  • remote option
    • 특정 모듈을 다른 애플리케이션에서 로드

주요 개념

1. Host: 원격 모듈을 불러오는 애플리케이션
2. Local Module: 로컬 모듈은 현재 빌드의 일부로, 일반적인 모듈. 이는 원격 모듈과 구별되며, 현재 애플리케이션 또는 프로젝트 내에서 정의되고 사용됨.
3. Remote Module: 원격 모듈은 현재 빌드의 일부가 아닌, 원격 컨테이너에서 런타임에 로드되는 모듈.
4. Exposes: 원격 모듈로 공개할 부분을 지정. 공개된 부분만 Host가 불러와 사용 가능.
5. Container: 컨테이너는 특정 모듈에 대한 비동기 접근을 노출하는 엔트리를 통해 생성됨. 컨테이너는 다른 컨테이너의 모듈을 사용할 수 있으며, 중첩 및 순환 의존성도 가능.

Example

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require( 'webpack' ).container ModuleFederationPlugin;
const deps = require(' ./package.json').dependencies;

module.exports = {
//....
	plugins: [
		new ModuleFederationPlugin({
			name: 'remote',
			filename: 'remoteEntry.js',
			exposes: {
				'./Nav': './src/components/Nav',
			},
			shared: {},
		}）,
		new HtmlWebpackPlugin({
			template: './public/index.html',
		}),
	],
}:

...
"scripts" : {
	//...
	"serve" : "serve dis -p 8081",
}

• module 정보
  • name : remote
  • 모듈이 담기는 파일 : remoteEntry.js

expose

• Nav module

Remote Application’s Component