vue2项目使用webpack模块联邦报错

Question

俩个项目用到的webpack版本都是当前的v5.59.1
a项目的webpack配置，a项目提供的组件用是个比较复杂的组件用到了其他库和其他组件

new ModuleFederationPlugin({
    filename: "remoteEntry.js",
    name: "newFactory",
    exposes: {
        "./complexFilter": "./src/coreComponents/components/complexFilter/index.vue",
    },
}),

b项目的webpack配置

new ModuleFederationPlugin({
  filename: "remoteEntry.js",
  name: "juniuReportFront",
  remotes: {
    newFactory: "newFactory@http://localhost:9999/remoteEntry.js"
  },
}),

b项目使用组件

<template>
<div>
    <range-input v-if="item.type==='INPUT'">
    <remote-complex-filter
      v-else-if="item.type==='RICH_FILTER'"
      @change="changeFun($event,item.value)"
      @changeSelect="changeSelectFun($event,item.label)"
      @changeDirect="changeDirect($event,item.label)"
    />
</div>
</template>
export default {
  name: 'Index',
  components: {
    rangeInput,
    remoteComplexFilter: () => import('newFactory/complexFilter')
  }
}

a项目端口号是9999，b项目是3781，为什么没有向http://localhost:9999 去获取这几个文件？

Answer 1

调试后发现这里和output.publicPath配置有关联，发现是之前的配置导致的bug

output: {
    publicPath:  './'
},

将publicPath注释掉或者换成对的路劲这个问题就解决了

另外记录一个问题，webpack4中可以如下配置，提供fs模块一个空对象

node: {
    fs: 'empty',
}

webpack5对应的配置

resolve: {
    fallback: {
        fs: false,
    }
}