Module Federation Runtime Chunk Merging

This plugin makes module federation work as expected when using runtimeChunk:"single" as an optimization tactic.

Solved common issues seen with next.js and other optimized builds with module federation

Usage

plugins: [
  new ModuleFedSingleRuntimePlugin(),
  new ModuleFederationPlugin({
    name: "app2",
    filename: "remoteEntry.js",
    exposes: {
      "./Button": "./src/Button",
    },
    shared: { react: { singleton: true }, "react-dom": { singleton: true } },
  }),
  new HtmlWebpackPlugin({
    template: "./public/index.html",
  }),
];

Example

Can be found in the /example directory

Supports

Webpack 5 with Federated Modules

Check out our book

| | We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates. | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |