Consume Federated Modules With Local Fallback | Unpkg, NPM

webpack.config.js

const path = require("path");

const { camelCase } = require("camel-case");

const webpack = require("webpack");
const { merge } = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

const pkg = require("./package.json");

function unpkgRemote(name) {
  const version = pkg.dependencies[name];

  return [
    `${camelCase(
      name
    )}@https://unpkg.com/${name}@${version}/dist/browser/remote-entry.js`,
    `${camelCase(name)}@/remote-fallbacks/${name}/remote-entry.js`,
  ];
}

function unpkgRemoteFallback(name) {
  return {
    from: path.dirname(require.resolve(`${name}/dist/browser/remote-entry.js`)),
    to: `remote-fallbacks/${name}`,
  };
}

/** @type {webpack.Configuration} */
const baseConfig = {
  mode: process.env.NODE_ENV === "development" ? "development" : "production",
};

/** @type {webpack.Configuration} */
const browserConfig = {
  output: {
    path: path.resolve("./dist/browser"),
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new CopyPlugin({
      patterns: [unpkgRemoteFallback("versioned-federated-module")],
    }),
    new webpack.container.ModuleFederationPlugin({
      remotes: {
        "versioned-federated-module": unpkgRemote("versioned-federated-module"),
      },
    }),
  ],
};

/** @type {webpack.Configuration} */
const nodeConfig = {
  target: "node",
  output: {
    path: path.resolve("./dist/node"),
  },
  plugins: [
    new webpack.container.ModuleFederationPlugin({
      remoteType: "commonjs",
      remotes: {
        "versioned-federated-module": "versioned-federated-module",
      },
    }),
  ],
};

module.exports = [
  merge(baseConfig, browserConfig),
  merge(baseConfig, nodeConfig),
];