我正在研究 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 } },
}),
...
],
};
Run Code Online (Sandbox Code Playgroud)
// app2 webpack.config.js
module.exports = {
entry: path.resolve(SRC_DIR, './index.js');,
...
plugins: …Run Code Online (Sandbox Code Playgroud) javascript reactjs webpack webpack-5 webpack-module-federation