标签: webpack-module-federation

我正在使用 Webpack 5 Module Federation 来使用远程模块。一切都按预期进行。

到目前为止，远程模块 URL 是公开的，不需要任何类型的身份验证。这对开发人员来说很好。目的。但在生产中，访问远程模块将需要某种身份验证。

我在 Webpack 文档中找不到有关身份验证的任何内容。

我想知道对于这种情况我有什么选择？

我正在研究 Webpack 5 模块联合功能，但在理解为什么我的代码不起作用时遇到了一些麻烦。这个想法与标准模块联合示例的做法非常相似：

app1- 是主机应用程序 app2- 是一个远程暴露整个应用程序app1

（app1呈现标题和水平线，app2应在其下方呈现）

双方app1并app2声明react与react-dom他们的共享，单，在急切的依赖weback.config.js：

// app1 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: `app2@//localhost:2002/remoteEntry.js`,
      },
      shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
    }),
    ...
  ],
};

// app2 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: …

我们正在使用 Module Federation WebPack 5 创建一个 MFE 角度应用程序，但最终出现了图像源路径问题。当我们单独运行 MFE 时，图像正在加载（localhost:5000/assets/../angular.png），但是当我们运行主机/shell 应用程序时，MFE 不会加载图像，因为 MFE 运行在不同的端口（5000）并且 Shell 运行在不同的端口（ 4200)，localhost:4200/assets/../angular.png当我们运行 shell 应用程序时，应用程序尝试从 Shell 的资产文件夹 ( ) 访问图像。

我们手头有两个选择：

1. 将这些图像移至 MFE 外部的公共文件夹并参考
2. 使用配置文件中的基本路径动态设置图像路径

我们使用下面的示例进行测试，但在下面的示例中，angular.png 文件在 MFE1 和 Shell 中都可用，但如果我们从 Shell 中删除它，则在加载 shell 应用程序时它将无法工作。

源参考代码示例（感谢@manfredsteyer）

MFE 中还有其他解决方案可以解决此问题吗？

如何正确设置 ModuleFederationreact-router-dom以便我可以

• Router和定义的路线Host应用程序中定义的路线
• 并且远程Header应用程序具有<Link>指向主机中定义的路由的组件？

但是，下面的设置失败，出现以下错误：

index.js:15 Uncaught Error: useHref() may be used only in the context of a <Router> component.

设置：

托管 mfe 应用程序，本地主机：3001

...
import { BrowserRouter } from 'react-router-dom'

const Header = lazy(() => import("header/Header"))

const Host = () => {
  return (
    <BrowserRouter>
       <React.Suspense fallback="Loading Header...">
         <Header />
       </React.Suspense>
       <Switch>
         <Route path="/input">
           <InputFormView />
         </Route>
         <Route path="/">
            <ListView />
         </Route>
       </Switch>       
    </BrowserRouter>)
}

...

主机的webpack.config.js

...

plugins: [ …

使用 Webpack 5 模块联合，如果远程入口被修改，你不需要重新部署主模块/应用程序，当浏览器请求时，将加载最新版本的模块。

我想知道：由于远程 URL 保持不变（例如http://localhost:8081/remoteEntry.js），浏览器可能会缓存文件和每次加载主模块时加载的缓存版本。另一方面，如果您为远程条目添加缓存破坏，您将没有缓存。

假设有一个使用 Webpack 5 Module federation 的具有微前端架构的应用程序。有一个远程微前端，其配置如下：

output: {
  publicPath: "http://localhost:8081/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "app1",
    filename: "remoteEntry.js",
    exposes: {
      "./Component1": "./src/Component1",
      "./someModule1": "./src/someModule1",
    },
  })
]

然后主模块配置：

output: {
  publicPath: "http://localhost:8080/",
},
plugins: [
  new ModuleFederationPlugin({
    name: "mainApp",
    filename: "remoteEntry.js",
    remotes: {
      app1: "app1@http://localhost:8081/remoteEntry.js"
    }
  })
]

这两个模块都部署在生产环境中。

然后我改变Component1从app1和部署app1模块。

如何处理远程模块缓存？

更新：

在我的情况下，浏览器似乎使用启发式缓存（https://tools.ietf.org/html/rfc7234#section-4.2.2），remoteEntry.js因为服务器不提供明确的到期时间。

因此，当remoteEntry.js更新时，主应用程序仍会从缓存中加载该文件，该文件可以缓存数周。对于块，这不是问题，因为 webpack 可以配置为在文件名中包含哈希。

因为remoteEntry.js …

我正在尝试使用 webpack 模块联合将大型单体 React 应用程序拆分为微前端。我已经部署了远程模块，并且在本地运行开发服务器时运行良好，一切正常。但是在运行 yarn build 并部署消费者应用程序后，它失败并显示以下错误：

Uncaught (in promise) ChunkLoadError: Loading chunk 935 failed.

注释掉延迟加载的远程模块时，一切正常。

任何人都知道如何使用远程加载的模块让 webpack 正确构建？

这是我的消费者组件：

import WorkOrderTrackingErrorBoundary from './work_order_tracking_error_boundary'
const WorkOrderTracking = lazy(() => import('dMove/WorkOrderTracking'))

const WorkOrderTrackingPage = (props) => {
    const spinner = (
        <SpinnerContainer>
            <Spinner type="bars" color="#3e145e" width="48px"/>
        </SpinnerContainer>
    )


    return (
        <Suspense fallback={spinner}>
            <WorkOrderTrackingErrorBoundary>
                <WorkOrderTracking/>
            </WorkOrderTrackingErrorBoundary>
        </Suspense>
    );
};

export default WorkOrderTrackingPage;

这是我的 webpack.prod.config.js 文件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin") …

关于与Webpack捆绑后注入环境变量的问题已经被提出并回答。