我正在研究Webpack 5的模块联邦功能,但是有些困难理解为什么我的代码无法正常工作。 这个想法与标准的模块联邦示例非常相似:
app1
- 是主机应用程序
app2
- 是一个远程应用程序,向app1
公开整个应用程序
(app1
渲染标题和水平线,下面应该呈现app2
)
app1
和app2
都在weback.config.js
中声明了react
和react-dom
作为共享的单例依赖项:
// 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: [
new ModuleFederationPlugin({
name: "app2",
library: { type: "var", name: "app2" },
filename: "remoteEntry.js",
exposes: {
"./App": "./src/App",
},
shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
}),
...
],
};
我在 App1 的 index.js 中有以下代码:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
下一个是 App1 组件的 App.js
:
import React, { Suspense } from 'react';
const RemoteApp2 = React.lazy(() => import("app2/App"));
export default function App() {
return (
<div>
<h1>App 1</h1>
<p>Below will be some content</p>
<hr/>
<Suspense fallback={'Loading App 2'}>
<RemoteApp2 />
</Suspense>
</div>
);
}
但是当我启动应用程序时,我会收到以下错误:
Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?1bb3
at Object.__webpack_modules__.<computed> (consumes:133)
at __webpack_require__ (bootstrap:21)
at fn (hot module replacement:61)
at Module../src/index.js (main.bundle.a8d89941f5dd9a37d429.js:239)
at __webpack_require__ (bootstrap:21)
at startup:4
at startup:6
如果我从index.js
提取所有内容到bootstrap.js
并在index.js
中进行操作
import('./bootstrap');
一切都运行得很好。
这让我感到困惑,因为官方文档和创建者的博客文章都说明您可以使用bootstrap.js
方式或声明依赖项为急切加载。
非常感谢任何解释/见解,解释为什么没有bootstrap.js
模式就无法正常工作。
这是我正在构建的完整GitHub沙箱链接:https://github.com/vovkvlad/webpack-module-fedaration-sandbox/tree/master/simple