webpack-plugin-mf 0.1.0

package/dist/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => mf
+});
+module.exports = __toCommonJS(index_exports);
+function mf(options = {}) {
+  const {
+    role = "host",
+    name = "app",
+    filename = "remoteEntry.js",
+    remotes = [],
+    exposes = [],
+    shared = []
+  } = options;
+  return async () => {
+    const webpackPath = require.resolve("webpack", { paths: [process.cwd()] });
+    const webpackMod = require(webpackPath);
+    const MFPlugin = webpackMod.container.ModuleFederationPlugin;
+    const remotesMap = {};
+    for (const r of remotes) {
+      const alias = r.alias ?? r.name;
+      remotesMap[alias] = `${r.name}@${r.entry}`;
+    }
+    const exposesMap = {};
+    for (const e of exposes) {
+      exposesMap[e.expose] = e.module;
+    }
+    const sharedConfig = {};
+    for (const dep of shared) {
+      let version = "*";
+      try {
+        const pkg = require(`${dep}/package.json`);
+        version = `^${pkg.version}`;
+      } catch {
+      }
+      sharedConfig[dep] = { singleton: true, requiredVersion: version };
+    }
+    const isRemote = role === "remote" || role === "both";
+    const isHost = role === "host" || role === "both";
+    return {
+      output: {
+        publicPath: "auto"
+      },
+      plugins: [
+        new MFPlugin({
+          name,
+          filename: isRemote ? filename : void 0,
+          remotes: isHost ? remotesMap : void 0,
+          exposes: isRemote ? exposesMap : void 0,
+          shared: sharedConfig
+        })
+      ]
+    };
+  };
+}

package/dist/index.d.cts

@@ -0,0 +1,91 @@
+import { WebpackPresetPlugin } from 'webpack-common';
+export { WebpackConfig, WebpackPresetPlugin } from 'webpack-common';
+
+type MfRole = 'host' | 'remote' | 'both';
+interface RemoteEntry {
+    /** 远端应用名称，用于 import("remoteName/Component") */
+    name: string;
+    /** 远端 remoteEntry.js 的 URL */
+    entry: string;
+    /** 暴露的模块别名，默认 name */
+    alias?: string;
+}
+interface ExposeEntry {
+    /** 暴露路径，如 './Button' */
+    expose: string;
+    /** 本地模块路径，如 './src/components/Button' */
+    module: string;
+}
+interface MfPluginOptions {
+    /**
+     * 当前应用角色
+     * - 'host': 消费其他应用的模块
+     * - 'remote': 暴露自己的模块给其他应用
+     * - 'both': 同时作为 host 和 remote
+     * 默认 'host'
+     */
+    role?: MfRole;
+    /**
+     * 当前应用名称（作为 remote 时必填）
+     */
+    name?: string;
+    /**
+     * remoteEntry 文件名，默认 'remoteEntry.js'
+     */
+    filename?: string;
+    /**
+     * 消费的远端应用列表（host 模式）
+     */
+    remotes?: RemoteEntry[];
+    /**
+     * 对外暴露的模块（remote 模式）
+     */
+    exposes?: ExposeEntry[];
+    /**
+     * 共享依赖（自动从 package.json 读取版本）
+     */
+    shared?: string[];
+}
+/**
+ * Module Federation webpack preset plugin
+ *
+ * @example Host 应用（消费远端模块）
+ * ```ts
+ * import { defineConfig } from 'webpack-common'
+ * import react from 'webpack-plugin-react'
+ * import mf from 'webpack-plugin-mf'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     react(),
+ *     mf({
+ *       role: 'host',
+ *       remotes: [
+ *         { name: 'remoteApp', entry: 'http://localhost:3001/remoteEntry.js' },
+ *       ],
+ *       shared: ['react', 'react-dom'],
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * @example Remote 应用（暴露模块）
+ * ```ts
+ * export default defineConfig({
+ *   presets: [
+ *     react(),
+ *     mf({
+ *       role: 'remote',
+ *       name: 'remoteApp',
+ *       exposes: [
+ *         { expose: './Button', module: './src/components/Button' },
+ *       ],
+ *       shared: ['react', 'react-dom'],
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+declare function mf(options?: MfPluginOptions): WebpackPresetPlugin;
+
+export { type ExposeEntry, type MfPluginOptions, type MfRole, type RemoteEntry, mf as default };

package/dist/index.d.ts

@@ -0,0 +1,91 @@
+import { WebpackPresetPlugin } from 'webpack-common';
+export { WebpackConfig, WebpackPresetPlugin } from 'webpack-common';
+
+type MfRole = 'host' | 'remote' | 'both';
+interface RemoteEntry {
+    /** 远端应用名称，用于 import("remoteName/Component") */
+    name: string;
+    /** 远端 remoteEntry.js 的 URL */
+    entry: string;
+    /** 暴露的模块别名，默认 name */
+    alias?: string;
+}
+interface ExposeEntry {
+    /** 暴露路径，如 './Button' */
+    expose: string;
+    /** 本地模块路径，如 './src/components/Button' */
+    module: string;
+}
+interface MfPluginOptions {
+    /**
+     * 当前应用角色
+     * - 'host': 消费其他应用的模块
+     * - 'remote': 暴露自己的模块给其他应用
+     * - 'both': 同时作为 host 和 remote
+     * 默认 'host'
+     */
+    role?: MfRole;
+    /**
+     * 当前应用名称（作为 remote 时必填）
+     */
+    name?: string;
+    /**
+     * remoteEntry 文件名，默认 'remoteEntry.js'
+     */
+    filename?: string;
+    /**
+     * 消费的远端应用列表（host 模式）
+     */
+    remotes?: RemoteEntry[];
+    /**
+     * 对外暴露的模块（remote 模式）
+     */
+    exposes?: ExposeEntry[];
+    /**
+     * 共享依赖（自动从 package.json 读取版本）
+     */
+    shared?: string[];
+}
+/**
+ * Module Federation webpack preset plugin
+ *
+ * @example Host 应用（消费远端模块）
+ * ```ts
+ * import { defineConfig } from 'webpack-common'
+ * import react from 'webpack-plugin-react'
+ * import mf from 'webpack-plugin-mf'
+ *
+ * export default defineConfig({
+ *   presets: [
+ *     react(),
+ *     mf({
+ *       role: 'host',
+ *       remotes: [
+ *         { name: 'remoteApp', entry: 'http://localhost:3001/remoteEntry.js' },
+ *       ],
+ *       shared: ['react', 'react-dom'],
+ *     }),
+ *   ],
+ * })
+ * ```
+ *
+ * @example Remote 应用（暴露模块）
+ * ```ts
+ * export default defineConfig({
+ *   presets: [
+ *     react(),
+ *     mf({
+ *       role: 'remote',
+ *       name: 'remoteApp',
+ *       exposes: [
+ *         { expose: './Button', module: './src/components/Button' },
+ *       ],
+ *       shared: ['react', 'react-dom'],
+ *     }),
+ *   ],
+ * })
+ * ```
+ */
+declare function mf(options?: MfPluginOptions): WebpackPresetPlugin;
+
+export { type ExposeEntry, type MfPluginOptions, type MfRole, type RemoteEntry, mf as default };

package/dist/index.js

@@ -0,0 +1,61 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/index.ts
+function mf(options = {}) {
+  const {
+    role = "host",
+    name = "app",
+    filename = "remoteEntry.js",
+    remotes = [],
+    exposes = [],
+    shared = []
+  } = options;
+  return async () => {
+    const webpackPath = __require.resolve("webpack", { paths: [process.cwd()] });
+    const webpackMod = __require(webpackPath);
+    const MFPlugin = webpackMod.container.ModuleFederationPlugin;
+    const remotesMap = {};
+    for (const r of remotes) {
+      const alias = r.alias ?? r.name;
+      remotesMap[alias] = `${r.name}@${r.entry}`;
+    }
+    const exposesMap = {};
+    for (const e of exposes) {
+      exposesMap[e.expose] = e.module;
+    }
+    const sharedConfig = {};
+    for (const dep of shared) {
+      let version = "*";
+      try {
+        const pkg = __require(`${dep}/package.json`);
+        version = `^${pkg.version}`;
+      } catch {
+      }
+      sharedConfig[dep] = { singleton: true, requiredVersion: version };
+    }
+    const isRemote = role === "remote" || role === "both";
+    const isHost = role === "host" || role === "both";
+    return {
+      output: {
+        publicPath: "auto"
+      },
+      plugins: [
+        new MFPlugin({
+          name,
+          filename: isRemote ? filename : void 0,
+          remotes: isHost ? remotesMap : void 0,
+          exposes: isRemote ? exposesMap : void 0,
+          shared: sharedConfig
+        })
+      ]
+    };
+  };
+}
+export {
+  mf as default
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "webpack-plugin-mf",
+  "version": "0.1.0",
+  "description": "Webpack preset plugin for Module Federation (micro-frontend)",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
+  },
+  "dependencies": {
+    "webpack-common": "workspace:*",
+    "webpack-merge": "^6.0.0"
+  },
+  "peerDependencies": {
+    "@module-federation/enhanced": ">=0.1.0",
+    "webpack": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@module-federation/enhanced": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@module-federation/enhanced": "^2.0.0",
+    "@types/node": "^22.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "webpack": "^5.0.0"
+  },
+  "license": "MIT",
+  "module": "dist/index.js"
+}