@Dream.mf Dev Portal

DMF Bundlers Package

The @dream.mf/bundlers package provides bundling configurations for webpack and rspack, specifically optimized for module federation and TypeScript support.

Installation

npm install @dream.mf/bundlers
# or
yarn add @dream.mf/bundlers

Main Features

Webpack Configuration

withBaseWebpack(customConfig: any, isTypescript = true)

Creates a webpack configuration with module federation support.

import { withBaseWebpack } from '@dream.mf/bundlers';

const webpackConfig = withBaseWebpack({
  scope: 'my-app',
  devPort: 3000,
  remotes: [
    { name: 'remote1', url: 'http://localhost:3001' }
  ]
}, true);

Rspack Configuration

withBaseRspack(customConfig: any, isTypescript: boolean)

Creates an rspack configuration with module federation support.

import { withBaseRspack } from '@dream.mf/bundlers';

const rspackConfig = withBaseRspack({
  scope: 'my-app',
  devPort: 3000,
  remotes: [
    { name: 'remote1', url: 'http://localhost:3001' }
  ]
}, true);

Configuration Types

BundlerConfigProps

interface BundlerConfigProps {
  scopeType: ScopeType;
  scope?: string;
  useTypescript: boolean;
  devPort: number;
  remotes?: FederatedRemote[];
  exposes?: FederatedModule;
}

Default Constants

export const DefaultRemoteName = 'remote';
export const DefaultContainerName = 'container';

Features

  • Module Federation support
  • TypeScript/JavaScript support
  • CSS Modules support
  • Asset handling
  • Development server configuration
  • Optimized production builds
  • Environment variable support

Example Usage

import { withBaseWebpack } from '@dream.mf/bundlers';

const config = withBaseWebpack({
  scopeType: 'remote',
  scope: 'my-remote-app',
  useTypescript: true,
  devPort: 3000,
  exposes: {
    './Button': './src/components/Button',
    './Card': './src/components/Card'
  },
  remotes: [
    {
      name: 'shared-ui',
      url: 'http://localhost:3001'
    }
  ]
});

module.exports = config;