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,
    }),
  ],
};