设置 webpack 从本地而不是通过 HTTP 拉取 JS 文件

Question

webpack.config.js 为 Module Federation 拉取远程 js。

plugins: [
  new ModuleFederationPlugin({
    remotes: {
      'mfe1': "mfe1@http://xxxxxxxxxx.com/remoteEntry.js"
    }
  })
],

如何在遥控器中或除遥控器之外使用本地 JS 文件？我在另一个文件夹中有一个简单的 react.js 库，其中包含 ./dist/browser/remote-entry.js 文件。我无法发布到 npm，所以我试图从本地加载它。会不会是这样的：

plugins: [
  new ModuleFederationPlugin({
    remotes: {
      'mfe1': "../../myproject/dist/browser/remoteEntry.js"
    }
  })
],

Answer 1

remotes 条目应该是 url 可以在运行期间访问，而不是构建期间。如果只在构建时需要，它会自动暗示 remoteEntry 被捆绑，这违背了 Webpack 模块联合（简称 WMF）的目的。

你说：

webpack.config.js pulls remote js for Module Federation.

但我不确定那是什么意思。 Webpack 根本不会“拉取”远程文件。它告诉最终构建在哪里查看，以便当您的代码（即 bundle.js）实际执行时，它知道从哪里动态加载模块。这意味着，为了 WMF 正常工作，您仍然需要从您的网络服务器提供文件。

你主要有两个选择：

如果您不想动态加载模块，只需在没有 WMF 的情况下构建您的项目。
如果你确实想要动态加载，那么你需要告诉 webpack remotes url。理想情况下，您可以从 process.env 获取实际服务器地址，您可以通过 dotenv（或通过许多其他方式）提供该地址：

webpack.config.js

// ...
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      remotes: {
        'mfe1': `mfe1@${process.env.REMOTE_HOST || 'http://localhost:8080'}/remoteEntry.js`
      }
    })
  ],
  // ...
};

.env

REMOTE_HOST=http://xxxxxxxxxx.com

此外，您可能需要考虑 this article on how to deploy a WMF build。

设置 webpack 从本地而不是通过 HTTP 拉取 JS 文件

Set up webpack to pull JS file from local rather than via HTTP

javascript

npm

reactjs

webpack

webpack-module-federation