Webpack 5 Configuration

Webpack 5's module federation capabilities are enabled through its standard container and remote configuration options. This section details the setup process for federated modules, including shared dependencies, remote exposure, and container integration.

---

Container Webpack Configuration

The container application hosts shared modules and loads federated components dynamically. Configure it with the following key settings:

// webpack.container.config.js
module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
    publicPath: 'auto',
  },
  plugins: [
    new webpack.container.SharedPlugin({
      name: 'container', // Unique identifier for this container
      remotes: {
        remoteApp: 'http://localhost:3001/remoteEntry.js', // Remote module entry point
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
      },
    }),
  ],
};

Key Concepts: - name: Identifier used to reference this container in remote modules. - remotes: Define remote modules and their entry points (e.g., http://localhost:3001/remoteEntry.js). - shared: Share dependencies across containers (e.g., React, React DOM).

---

Remote Webpack Configuration

Remote modules expose their components to containers. Configure them with the following structure:

// webpack.remote.config.js
module.exports = {
  entry: './src/remote-entry.js',
  output: {
    filename: 'remoteEntry.js',
    path: __dirname + '/dist',
    publicPath: 'http://localhost:3001/',
  },
  plugins: [
    new webpack.container.ModuleFederationPlugin({
      name: 'remoteApp', // Must match the `remotes` entry in the container
      exposes: {
        './Component': './src/Component.jsx', // Expose a specific module
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' },
      },
    }),
  ],
};

Key Concepts: - name: Must match the key in the container's remotes configuration. - exposes: Define which modules are available to containers (e.g., ./Component). - shared: Ensure compatibility with shared dependencies.

---

Building and Serving

1. Build the remote module:

   npm run build --prefix ./remote-app
   

   This generates remoteEntry.js at the specified publicPath.

2. Serve the container:

   npm run serve --prefix ./container-app
   

   The container dynamically loads remote modules via import().

3. Access remote modules in the container:

   // ./src/main.js
   import('./remoteApp/Component').then((module) => {
     const Component = module.default;
     // Render Component
   });
   

---

Diagram: Container-Remote Relationship

[Container App]  
  ↓ (Webpack)  
  └── Loads remoteEntry.js from [Remote App]  
        ↓ (Webpack)  
        └── Exposes ./Component to container

---

Key takeaways

• Container config defines shared dependencies and remote module entry points.
• Remote config exposes specific modules and aligns with container definitions.
• Use import() in containers to dynamically load remote components.
• Ensure shared dependencies are versioned consistently across all modules.