{"id":19380840,"url":"https://github.com/module-federation/webpack-4","last_synced_at":"2025-04-23T20:31:46.882Z","repository":{"id":62186285,"uuid":"538596020","full_name":"module-federation/webpack-4","owner":"module-federation","description":"Webpack 4 Plugin For Module Federation","archived":false,"fork":false,"pushed_at":"2023-11-14T07:27:32.000Z","size":97,"stargazers_count":42,"open_issues_count":2,"forks_count":5,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-21T23:29:01.802Z","etag":null,"topics":["module-federation","webpack","webpack-plugin","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/module-federation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-09-19T16:32:26.000Z","updated_at":"2024-11-11T15:43:39.000Z","dependencies_parsed_at":"2023-11-14T08:30:56.635Z","dependency_job_id":"3c9dcaf7-1023-43a3-b7fd-3e39c43a8527","html_url":"https://github.com/module-federation/webpack-4","commit_stats":{"total_commits":178,"total_committers":3,"mean_commits":"59.333333333333336","dds":0.3707865168539326,"last_synced_commit":"3d2392cab19d3b506a6cb2d46cbddeadc11c3118"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Fwebpack-4","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Fwebpack-4/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Fwebpack-4/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/module-federation%2Fwebpack-4/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/module-federation","download_url":"https://codeload.github.com/module-federation/webpack-4/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250509655,"owners_count":21442469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["module-federation","webpack","webpack-plugin","webpack4"],"created_at":"2024-11-10T09:14:58.831Z","updated_at":"2025-04-23T20:31:46.569Z","avatar_url":"https://github.com/module-federation.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Module Federation of webpack4\n\n\u003c!-- [![npm](https://img.shields.io/npm/v/@module-federation/webpack-4.svg)](https://www.npmjs.com/package/@module-federation/webpack-4) --\u003e\n[![npm](https://img.shields.io/npm/v/mf-webpack4.svg)](https://www.npmjs.com/package/mf-webpack4)\n\n[中文文档](doc/chinese)\n\nsupport [universal-module-federation-plugin](https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/universal-module-federation-plugin)\n\n\n### Try online:\n* [webpack4 + webpack5](https://stackblitz.com/github/wpmjs/examples/tree/main/webpack4-module-federation/webpack4-5-module-federation)\n* [vue-cli + umi-react](https://stackblitz.com/github/wpmjs/examples/tree/main/webpack4-module-federation/webpack4-vue-cli-umi-react)\n    * [vue-cli matters needing attention](https://github.com/module-federation/webpack-4#vue-cli-matters-needing-attention)\n* [dynamic-remotes examples](#dynamic-remotes-examples)\n\n### config examples:\n``` js\n// webpack.config.js\nconst MF = require(\"mf-webpack4\")\nmodule.exports = {\n  plugins: [\n\n    new MF({\n      remotes: {\n        \"app2\": \"app2@http://localhost:9002/remoteEntry.js\"\n      },\n      name: \"app1\",\n      filename: \"remoteEntry.js\",\n      shared: {\n        \"react\": {\n          singleton: true,\n          requiredVersion: \"16\",\n          strictVersion: true\n        },\n        \"react-dom\": {\n          singleton: false,\n        }\n      },\n      exposes: {\n        \"./App\": \"./src/App\"\n      }\n    })\n\n  ]\n}\n```\n\n## dynamic-remotes examples\nuse [module-federation-runtime](https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/module-federation-runtime) instead of [webpack internal variables and dynamic loading API](https://h3manth.com/posts/dynamic-remotes-webpack-module-federation/)\n``` js\n\n// 1. __webpack_init_sharing__ \nawait require(\"module-federation-runtime\").initSharing(\"default\")\n\n// 2. __webpack_share_scopes__ \nrequire(\"module-federation-runtime\").shareScopes\n\n// 3. dynamic-remotes\nawait require(\"module-federation-runtime\").registerRemotes({\n  \"mfapp01\": {\n    url: \"https://cdn.jsdelivr.net/npm/mf-app-01/dist/remoteEntry.js\"\n  },\n})\nconst AppFactory = await findModule(\"mfapp01\", \"./App\")\nAppFactory()\n```\n\n## Options\n### shared\nhttps://webpack.js.org/plugins/module-federation-plugin/\n``` js\n1. shared: [\"react\"]\n2. shared: {react: \"17.0.2\"}\n3. shared: {react: {\"import\", eager, requiredVersion, shareScope, singleton, version}}\n```\n\n### remotes\n``` js\nremotes: {\n    \"app2\": \"app2@http://localhost:9002/remoteEntry.js\",\n    \"promiseRemote\": `promise new Promise(resolve =\u003e resolve({\n      init() {},\n      get() {\n        return function () {\n          return {\n            promiseRemote: \"aaaa\"\n          }\n        }\n      }\n    }))`\n}\n```\n\n### name\nlibrary required name\n\n### filename\ndefault \"remoteEntry.js\"\n\n### exposes\n``` js\nexposes: {\n    \"./App\": \"./src/App\"\n}\n```\n\n## matters needing attention\n\n### vue-cli matters needing attention\n``` js\n// vue.config.js\nconst MF = require(\"mf-webpack4\")\n\nmodule.exports = {\n  // TODO: 1. parallel = false\n  // It is suspected that there is a bug in the cooperation between \"webpack-virtual-modules\" and \"thread-loader\", and an error will be reported during the packaging stage\n  parallel: false,\n  chainWebpack(chain) {\n    // TODO: 2. clear splitChunks\n    // The splitChunks strategy of vue-cli needs to be used in conjunction with index.html, and main.js, chunks.js... are loaded at the entry. The entry of MF has only one file remoteEntry.js, the policy conflicts and needs to be reset\n    chain.optimization.splitChunks().clear()\n    \n    chain.plugin(\"moduleFederation\")\n      .use(MF, [{\n        name: \"vueCliRemote\",\n        shared: [\"vue\"],\n        exposes: {\n          \"./App\": \"src/App.vue\"\n        }\n      }])\n  },\n}\n```\n\n## Differences with webpack5\nmodule-federation/webpack-4 The plugin has implemented the main capabilities of module-federation, and can be found in [webpack4 and webpack5 refer to each other](https://stackblitz.com/github/wpmjs/wpmjs/tree/main/examples/module-federation/webpack-4) , The following describes which parameters are not supported by the plugin\n\n## unsupported parameter\n\n### options.library\nThe priority of this parameter is not very high, see for details \"https://github.com/webpack/webpack/issues/16236\" , Therefore, the implementation in webpack4 is similar to setting library.type = \"global\"\n\n### options.remotes.xxx.shareScope","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodule-federation%2Fwebpack-4","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodule-federation%2Fwebpack-4","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodule-federation%2Fwebpack-4/lists"}