模块联邦-文件配置

exposes - 提供共享组件

+ const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...
  configureWebpack: {
+   optimization: {
+     splitChunks: false // 提供共享组件时，必须配置为false
+   },
+   plugins: [
+     new ModuleFederationPlugin({
+       name: 'situation_microapp_share',
+       filename: 'remoteEntry.js', // 另外一个应用html中引入的模块联邦入口文件
+       library: { type: 'window', name: 'situation_microapp_share' }, // 增加library，一定注意type 是 window
+       exposes: {
+         './comps': './src/expose/components/index.js',
+         './search': './src/expose/search/index.js'
+       }
+     })
+   ]
  }
  // ...
};

exposes&remotes - 提供&使用共享组件

+ const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+ const shareAddr =  '/microapps/situation-microapp-share/remoteEntry.js'

;

module.exports = {
  // ...
  configureWebpack: {
+   optimization: {
+     splitChunks: false // 提供共享组件时，必须配置为false
+   },
+   plugins: [
+     new ModuleFederationPlugin({
+       name: 'sheet_situation',
+       filename: 'remoteEntry.js', // 另外一个应用html中引入的模块联邦入口文件
+       library: { type: 'window', name: 'sheet_situation' }, // 增加library，一定注意type 是 window
+       exposes: {
+         './comps': './src/expose/components/index.js',
+       }
+     }),
+     new ModuleFederationPlugin({
+        remotes: {
+          'situation_microapp_share': `situation_microapp_share@${shareAddr}`
+        },
+      }),
+   ]
  }
  // ...
};

警告

特别注意：

 加如下代码可解决：

optimization: {
  splitChunks: false
};

原因分析：不加上述代码，执行打包后会生成chunk-vendors.43d3c6d0.js，该文件会抽取公共js，在html引入，且在app.js和remoteEntry.js之前执行。若不加上述代码，公共js会打包到各个js文件中。在MDF其他模块remotes的时候，若配置了分包，在引用remoteEntry.js的时候会执行不到公共 js 文件，故会报此错。若不启用分包，在 MDF 其他模块引用remoteEntry.js的时候，公共 js 会打包到单个文件中，故正常运行。