What is Webpack Module Federation?

Webpack Module Federation is a feature introduced in Webpack v5. It allows sharing of modules between different Webpack bundles. This can be useful for building micro frontends, which are small, independent applications that can be combined to form a larger application.

Some key points about Webpack Module Federation are:

• It allows you to split your frontend application into smaller modules that can be developed independently but combined at runtime.

• Each module only loads the dependencies it needs, reducing bundle size. Shared dependencies are only loaded once.

• Modules can be developed using different frameworks and technologies.

• Modules communicate by exposing and consuming components and code.

• It's a zero-config solution. Minimal Webpack configuration is required.

  Basic Concepts

• Host app - The main application that loads remote modules

• Remote module - An external module consumed by the host app

• Exposed module - A module exported from a remote app for consumption

• Shared module - A module shared between remote apps

  How to use Webpack Module Federation

  Install the webpack-module-federation plugin

    npm install webpack-module-federation
  

  Configure the host app's Webpack config

    const { ModuleFederationPlugin } = require('webpack-module-federation');
  
    module.exports = {
      plugins: [
        new ModuleFederationPlugin({
          name: 'host-app',
          remotes: {
            // Remote app 1
            remote1: 'http://localhost:3001/remoteEntry.js',
            // Remote app 2
            remote2: 'http://localhost:3002/remoteEntry.js',
          },
        }),
      ],
    };
  

  Configure the remote app's Webpack config

    const { ModuleFederationPlugin } = require('webpack-module-federation');
  
    module.exports = {
      plugins: [
        new ModuleFederationPlugin({
          name: 'remote-app-1',
          exposes: {
            // Component to expose to the host app
            MyComponent: './components/MyComponent',
          },
        }),
      ],
    };
  

  Expose components from the remote app

  To expose components from the remote app, you can use the exposes property in the ModuleFederationPlugin configuration. This property should be an object that maps the name of the component to the path to the component file.

  Consume components from the remote app in the host app

  To consume components from the remote app in the host app, you can use the dynamic import() function. This function allows you to dynamically load modules at runtime.

    import { dynamicImport } from 'webpack-module-federation';
  
    const MyComponent = await dynamicImport(
        'remote1', './components/MyComponent'
    );
  
    <MyComponent />;
  

  Benefits of using Webpack Module Federation

  • Reduced code duplication: Webpack Module Federation allows developers to share modules between different applications, which can reduce code duplication and save time and effort.

  • Improved performance: Webpack Module Federation can help to improve the performance of applications by reducing the size of the bundles and only generating a bundle for each application that includes the modules that the application needs.

  • Increased flexibility: Webpack Module Federation gives developers more flexibility in how they develop and deploy their applications, such as building micro frontends or sharing modules between different types of applications.

  • Independent development of modules by different teams: Webpack Module Federation allows different teams to develop modules independently, which can improve efficiency and productivity.

  • Optimized bundle size as shared dependencies are only loaded once: Webpack Module Federation only loads shared dependencies once, which can reduce the overall size of the bundles and improve performance.

  • Micro-frontends can use different frameworks and technologies: Webpack Module Federation allows micro-frontends to use different frameworks and technologies, which can give developers more flexibility in choosing the right tools for the job.

Sharing State

• Create a shared store

• Access the shared store from both apps

• Update the state from either app and see the changes reflected in the other

Best Practices

• Use environment variables to define remote app URLs

• Define shared dependencies explicitly

• Use lazy loading to handle remote app failures gracefully

• Cache remote modules to improve performance

• Deploy remote apps to a CDN for optimal scalability

Conclusion

Webpack Module Federation is a powerful tool that can be used to build modular, performant, and scalable web applications. It offers several benefits, including reduced code duplication, improved performance, and increased flexibility.

If you are developing web applications, consider using Webpack Module Federation to build better applications.