universal-module-federation-plugin

This is currently version 2.0 documentation, v1 is here

中文文档

Keep the original API of module-federation, support the integration of various module specifications

Allows you to control all the processes of each dependency by yourself

try online

• mf + umd
• web worker（Using module-federation in worker threads）
  • Both plugins can set workerFiles to specify worker files or directories to use module-federation in worker threads

  • // webpack.config.js
    new UmdPlugin({
      workerFiles: [/\.?worker\.js$/]
    })
    new UniversalModuleFederationPlugin({
      workerFiles: [/\.?worker\.js$/]
    })

Table of contents

• umd federation
  • UmdPlugin examles
  • UmdPlugin API
• UniversalModuleFederation
  • delegate modules
  • UniversalModuleFederationPlugin examles

UmdPlugin examles

Allow module-federation to use umd module, umd dependencies can be obtained from shareScopes or remotes

// webpack.config.js
const {UmdPlugin} = require("universal-module-federation-plugin")

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
          name: 'app3',
          filename: 'remoteEntry.js',
          remotes: {
            app2: "app2@http://localhost:9002/remoteEntry.js",
          },
          exposes: {
            './App': './src/App',
          },
          shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
        }),
        new UmdPlugin({
          // The matched remotes are loaded in umd mode
          remotes: {
            "react-router": "https://unpkg.com/[email protected]/dist/umd/react-router.production.min.js",
            "@remix-run/router": "https://unpkg.com/@remix-run/[email protected]/dist/router.umd.min.js"
          }
        }),
        new UmdPlugin({
          // ...
          // Can be used multiple times
        })   
    ]
}

UmdPlugin API

| options | desc | interface | default | examles | |-------------|----------------------|:--------------------------------|---------|:-------------------| | remotes | umd remotes | { remoteKey: "{global}@{url}" } | {} | string> | | workerFiles | web worker file path | | [] | [/.?worker.js$/] |

delegate modules

Reference from delegate-modulesnot the official warehouse

// webpack.config.js
const {DelegateModulesPlugin} = require("universal-module-federation-plugin")

module.exports = {
    plugins: [
        new ModuleFederationPlugin({
          shared: { react: { singleton: true } },
        }),
        new DelegateModulesPlugin({
            remotes: {
                test1: "internal ./src/remote-delegate.js?remote=test1@http://localhost:9000/remoteEntry.js"
            }
        })
    ]
}

// src/remote-delegate.js
module.exports = new Promise((resolve, reject) => {
  const currentRequest = new URL(__resourceQuery, __webpack_base_uri__).searchParams.get("remote");
  const [global, url] = currentRequest.split('@');
  const __webpack_error__ = new Error()
  __webpack_require__.l(
    url,
    function (event) {
      if (typeof window[global] !== 'undefined') return resolve(window[global]);
      var realSrc = event && event.target && event.target.src;
      __webpack_error__.message = 'Loading script failed.\\n(' + event.message + ': ' + realSrc + ')';
      __webpack_error__.name = 'ScriptExternalLoadError';
      __webpack_error__.stack = event.stack;
      reject(__webpack_error__);
    },
    global,
  );
})

UniversalModuleFederationPlugin examles

If you have your own module specification, you can use UniversalModuleFederationPlugin to integrate it.

UniversalModuleFederationPlugin Exposes some hooks to customize the loading behavior of remote control

// webpack.config.js
const {UniversalModuleFederationPlugin} = require("universal-module-federation-plugin")

plugins: [
    new UniversalModuleFederationPlugin({
      remotes: {
        app1: function (){
          return Promise.resolve({
            init() {},
            async get(modulePath) {
                return function () {
                    return ({"./App1": "./App1", "./App2": "./App2"})[modulePath]
                }
            }
          })
        }
      },
    })
]

// main.js
import App1 from "app1/App1"
import App2 from "app1/App2"
console.log(App1, App2)