webpack-federation-obj-exposes

Configure Webpack 5 Module Federation exposes through a nested object hierarchy.

Install

> npm i --save-dev webpack-federation-obj-exposes

Usage

const objectExposes = require("webpack-federation-obj-exposes");

const exposes = objectExposes({
  components: {
    AppShell: "./src/components/AppShell.jsx",
  },
});

// ...

new ModuleFederationPlugin({
  name: "abtests",
  library: { type: "var", name: "abtests" },
  filename: "remoteEntry.js",
  exposes,
});

Examples

Basic

Input

const objectExposes = require("webpack-federation-obj-exposes");

const exposes = objectExposes({
  components: {
    AppShell: "./src/components/AppShell.jsx",
  },
});

Output

const exposes = {
  "./components/AppShell": "./src/components/AppShell.jsx",
};

Custom Path

Input

const objectExposes = require("webpack-federation-obj-exposes");

const exposes = objectExposes(
  {
    components: {
      AppShell: "./src/components/AppShell.jsx",
    },
  },
  "./example"
);

Output

const exposes = {
  "./example/components/AppShell": "./src/components/AppShell.jsx",
};