Discover federated chunks using webpack-flush-chunks

webpack-stats-with-exposed-federated-modules.js

new StatsWriterPlugin({
  stats: {
    all: true,
  },
  transform(stats) {
    const federatedChunks = stats.chunks.filter((chunk) =>
      chunk.origins.some((origin) => origin.moduleName === "container entry")
    );

    const assetsByChunkName = Object.entries(
      federatedChunks.reduce((acc, chunk) => {
        chunk.origins.forEach((origin) => {
          if (origin.moduleName === "container entry") {
            const chunkName = origin.loc.replace(/^\.\//, "");
            acc[chunkName] = acc[chunkName] || new Set();
            chunk.files.forEach((file) => acc[chunkName].add(file));
          }
        });
        return acc;
      }, {})
    ).reduce((acc, [k, v]) => ({ ...acc, [k]: Array.from(v) }), {});

    return JSON.stringify(
      {
        ...stats,
        assetsByChunkName: {
          ...assetsByChunkName,
          ...stats.assetsByChunkName,
        },
      },
      null,
      2
    );
  },
});

// Usage

const chunks = flushChunks.default(stats, {
  chunkNames: [
    // Entry
    "client",
    // Container name
    "__MWAP_PAGES__",
    // Exposed module
    "pages/home"
  ],
});

/* Returns:
// Global Styles used by entry and federated module
<link rel='stylesheet' href='/production/styles.css' />
// Webpack runtime
<script type='text/javascript' src='/production/webpack-runtime.cce06e95fcba686769f8.js' defer='defer'></script>
// Split Chunks
<script type='text/javascript' src='/production/lib-react-dom-17.0.2.c82ea19a1f81b77c61aa.js' defer='defer'></script>
<script type='text/javascript' src='/production/commons.cfabbf0a3df62ec13421.js' defer='defer'></script>
// Entry "client"
<script type='text/javascript' src='/production/client.eecec534794bbc0aebb1.js' defer='defer'></script>
// Container "__MWAP_PAGES__"
<script type='text/javascript' src='/production/pages.22830149f48f05e28fbb.js' defer='defer'></script>
// Container exposed chunk "pages/home"
<script type='text/javascript' src='/production/963.0a14ca93c4e7bb510cd3.js' defer='defer'></script>
*/