DEV Community

Naveen kumar Gopi
Naveen kumar Gopi

Posted on

1

Module Federation

The module federation plugin spits out this set of files that includes a set of directions on how other projects can get access to the source code - meaning Basically the module federation plugin comes into action when we are working in Micro-Frontend application.

Here inside the plugin array, we need to declare the plugin with its name, filename(visible in network tab), exposes.
The Plugin will create the global object with the name had been declared.
Whereas exposes we need to tell webpack that i need to share the file remotely for that path of the file is mentioned.

Usage:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
 const devConfig = {
  mode: "development",
  devServer: {
    port: 8081,
    historyApiFallback: {
      index: "index.html",
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "marketing",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/index",
      },
      shared: packageJSON.dependencies,
    }),
  ],
};

Enter fullscreen mode Exit fullscreen mode

Image of Datadog

Master Mobile Monitoring for iOS Apps

Monitor your app’s health with real-time insights into crash-free rates, start times, and more. Optimize performance and prevent user churn by addressing critical issues like app hangs, and ANRs. Learn how to keep your iOS app running smoothly across all devices by downloading this eBook.

Get The eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs