Webpak 5 Series Part-2

Please look for the other parts of the series to fully understand the concept.
Webpack 5 series part-1
Webpack 5 series part-3
Webpack 5 series part-4

What is Micro frontend?

A micro-frontend is an architectural style where a front-end application is divided into smaller, independent modules, or micro-applications, that work together to form a larger, cohesive application. Each micro-frontend can be developed, deployed, and maintained independently, much like microservices in the backend architecture.

Micro-frontends are ideal for large-scale projects where multiple teams are involved, or where the application needs to evolve quickly without significant downtime.

Use case
In a large e-commerce website, the product list, shopping cart, and checkout functionalities could be implemented as separate micro-frontends. Each part is developed by different teams but together they form a complete e-commerce application.

What is Module federation?

Module federation is a new plugin in Webpack 5. That allows multiple separate builds (e.g., micro-frontends) to share code at runtime. This is particularly useful in the context of micro-frontends, where you might want different parts of the app to be developed and deployed independently, but still share certain modules.

There are some key concepts in module federation.

1. HOST:A host is a micro-frontend that consumes code from other applications (remotes).

2. REMOTE: A remote is a micro-frontend that exposes code for other applications to consume.

3. Module Federation allows micro-frontends to share common dependencies like React, libraries, etc., rather than bundling them multiple times, which reduces bundle size and ensures that different micro-frontends are using the same version of a library.

4. Remotes can be dynamically loaded at runtime, meaning the host app does not need to know the exact location of the remote application during the build time. This is important for environments where micro-frontends are deployed independently and might change URLs.

Module Federation: Core Configurations

Here’s how you can configure Module Federation in Webpack:

1. Exposing Modules (in the remote app):

• name: The name of the remote app.

• filename: The name of the file where the federated modules are exposed.

• exposes: Modules within the remote app that are exposed for other apps to use.

• shared: Shared dependencies (like React, etc.).
  

// webpack.config.js (remote app)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

1. Consuming Modules (in the host app):

// webpack.config.js (host app)
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

1. Usage in Application: In the host app, you can use the exposed module like this:

import React from 'react';
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

const App = () => (
  <div>
    <h1>Host App</h1>
    <React.Suspense fallback="Loading Remote Button">
      <RemoteButton />
    </React.Suspense>
  </div>
);
export default App;