设置 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 为 Module Federation 拉取远程 js。

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

您主要有两个选择：

1. 如果您不想动态加载模块，只需在没有WMF 的情况下构建您的项目。
2. 如果你确实想要动态加载，那么你需要告诉 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。