时间戳

首页 > 解决方案 > 模块联合不适用于 webpack.config.js 中的动态挂钩远程

webpack-module-federation - 模块联合不适用于 webpack.config.js 中的动态挂钩远程

问题描述

当我在 index.html 中预先加载遥控器时，我已经设置了模块联合并且工作正常

下面的作品

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://localhost:8002/remoteEntry.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

host webpack
{
            name: "home",
            library: {type: "var", name: "home"},
            filename: "remoteEntry.js",
            remotes: {
                nav: "dashboards",
            },
            shared: ["react", "react-dom"],
        }

remote webpack
{
            name: "dashboards",
            library: {type: "var", name: "dashboards"},
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
                Header: "./src/Header",
            },
            shared: ["react", "react-dom"],
        }

但是，这会预先加载 JS 文件，这是不可取的。我正在关注在 webpack 中动态加载库的示例......这就是我想要做的

index.html
<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>
</html>



host webpack
{

            name: "app-shell",
            filename: "remoteEntry.js",
            remotes: {
                dashboards: "dashboards@http://localhost:8002/remoteEntry.js",
            },
        }

remote webpack
{
            name: "dashboards",
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
                Header: "./src/Header.jsx",
            },
        }

我在主机应用程序上收到错误

Uncaught syntax error; Invalid or unexpected token:
module.exports = dashboards@http://localhost:8002/dist/remoteEntry.js;

JS 错误

标签： webpack-module-federation

解决方案

你的远程 Webpack 暴露对象不正确。你错过了./前面的Header。替换为：

"./Header": "./src/Header.jsx"

此外，如果这不起作用，请尝试删除库部分：

library: {type: "var", name: "dashboards"}

我认为这将remoteTypefrom更改var为script，这显然有帮助。

推荐阅读