module-federation / webpack-4

Webpack 4 Plugin For Module Federation
MIT License
42 stars 5 forks source link

引用组件的项目,启动后提示不能再入口文件中使用 #16

Open yychengyy opened 1 year ago

yychengyy commented 1 year ago

image 排查了一下是webpack的entry文件中有引用,为什么会有这样的限制,怎么避开?

zhangHongEn commented 1 year ago

https://webpack.js.org/concepts/module-federation/#troubleshooting 此限制与webpack5的限制一致, 在入口使用远程模块时候需要新开异步chunk, 来实现等待远程模块的加载, 这一步体现在 import("./bootstrap")

如果你不清楚如何修改 可以贴一下entry代码我来修改

yychengyy commented 1 year ago

可以给个示例吗?我的代码太长,是业务逻辑,总得来说,我的业务需求是必须在entry设置的js文件里引入远程模块的js处理业务

yychengyy commented 1 year ago

entry:{ app: 'a.js' } a.js impot service from service/main'; // 引用远程模块 类似这样

zhangHongEn commented 1 year ago

简单的说就是把a.js的内容复制到bootstrap.js中去

entry:{
app: 'a.js'
}
// a.js
import("./bootstrap.js")
// bootstrap.js
impot service from service/main'; // 引用远程模块
yychengyy commented 1 year ago

为什么这样就可以避开限制,执行结果不也相当于引入远程模块吗?

zhangHongEn commented 1 year ago

entry a.js作为入口 会被任意其他项目用各种方式(如script、fetch、systemjs等)引入, 它的加载方式不受webpack干涉, 所以无法等待远程模块的加载。 import("./bootstrap")会进行代码分割, 拆分出 bootstrapChunk.hash.js, webpack加载这个chunk时MF会处理远程模块的加载与等待

yychengyy commented 1 year ago

我讲a.js的内容全部移动到bootstrap.js,然后执行,又提示变量不存在,是不是应该有什么特殊设置? 大佬,方便加个微信或者其他的联络方式吗?指导一下我MF速成

zhangHongEn commented 1 year ago

我讲a.js的内容全部移动到bootstrap.js,然后执行,又提示变量不存在,是不是应该有什么特殊设置? 大佬,方便加个微信或者其他的联络方式吗?指导一下我MF速成

微信zhang_h_n

erickfabiandev commented 3 months ago

遇到同样的问题,想知道解决了吗?就我而言,我使用

image

zhangHongEn commented 3 months ago

遇到同样的问题,想知道解决了吗?就我而言,我使用

image

创建 bootstrap.js 可以解决你的问题 (https://webpack.js.org/concepts/module-federation/#troubleshooting) 但是webpack 4有点旧了, 推荐直接使用 @module-federation/runtime