当我在 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;