docs: how to generate esm outputs for mf format (#1059)

Co-authored-by: Wei <[email protected]>

Author: Timeless0911

website/docs/en/guide/advanced/module-federation.mdx

@@ -87,7 +87,7 @@ In this way, we have completed the integration of Rslib Module as a producer. Af
 
 In the above example we added a new `format: 'mf'` , which will help you add an additional Module Federation product, while also configuring the format of `cjs` and `esm` , which does not conflict.
 
-However, if you want this Rslib Module to consume other producers at the same time, do not use the build configuration `remote` parameter, because in other formats, this may cause errors, please refer to the example below using the Module Federation runtime
+However, if you want this Rslib Module to consume other producers at the same time, do not use the build configuration `remote` parameter, because in other formats, this may cause errors, please refer to the example below using the Module Federation runtime.
 
 ## Develop MF remote module
 
@@ -313,6 +313,8 @@ This ensures that modules can be loaded as expected in multiple formats.
 
 ## FAQs
 
+### How to control the loading strategy of shared dependencies when the producer and consumer build patterns are different
+
 If the Rslib producer is built with build, this means that the `process.env.NODE_ENV` of the producer is `production` . If the consumer is started in dev mode at this time,
 due to the shared loading strategy of Module Federation being `version-first` by default, there may be problems loading into different modes of react and react-dom (e.g. react in development mode, react-dom in production mode).
 You can set up [shareStrategy](https://module-federation.io/configure/sharestrategy) at the consumer to solve this problem, but make sure you fully understand this configuration
@@ -324,6 +326,29 @@ pluginModuleFederation({
 }),
 ```
 
+### How to make module federated outputs generate export of ES modules
+
+If you want Rslib producers' module federated outputs to generate the export of ES Modules, you can additionally configure as follows:
+
+```ts title='rslib.config.ts'
+export default defineConfig({
+  lib: [
+    {
+      format: 'mf',
+      // ...
+      // [!code highlight:7]
+      tools: {
+        rspack(config) {
+          config.experiments = {
+            outputModule: true,
+          };
+        },
+      },
+    },
+  ],
+});
+```
+
 ## Examples
 
 [Rslib Module Federation Example](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)

website/docs/zh/guide/advanced/module-federation.mdx

@@ -87,7 +87,7 @@ export default defineConfig({
 
 在上面的例子中，我们添加了一个新的 `format: 'mf'` ，它将添加一个额外的模块联邦产物，同时还配置了 `cjs` 和 `esm` 的格式，它们是不冲突的。
 
-但是，如果你希望此 Rslib 模块同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例
+但是，如果你希望此 Rslib 模块同时消费其他生产者，请不要使用构建配置 `remote` 参数，因为在其他格式下，这可能会导致错误，请参考下面使用 Module Federation 运行时的示例。
 
 ## 开发 MF 远程模块
 
@@ -313,6 +313,8 @@ export const Counter: React.FC = () => {
 
 ## FAQs
 
+### 生产者与消费者构建模式不同时如何控制共享依赖的加载策略
+
 如果 Rslib 生产者是用 build 构建的， 这意味着生产者中的 `process.env.NODE_ENV` 是 `production` 。如果这时消费者是使用的开发模式启动，由于模块联邦默认使用共享的加载策略，可能会有 react 和 react-dom 加载模式不一致的问题 (比如 react 在 development mode, react-dom 在 production mode)。
 你可以在消费者设置 [shareStrategy](https://module-federation.io/zh/configure/sharestrategy) 来解决这个问题，这需要你确保已经完全理解了这个配置。
 
@@ -323,6 +325,29 @@ pluginModuleFederation({
 }),
 ```
 
+### 如何让模块联邦产物生成 ES modules 的导出
+
+如果你希望 Rslib 生产者的模块联邦产物生成 ES Modules 的导出，可以额外配置如下：
+
+```ts title='rslib.config.ts'
+export default defineConfig({
+  lib: [
+    {
+      format: 'mf',
+      // ...
+      // [!code highlight:7]
+      tools: {
+        rspack(config) {
+          config.experiments = {
+            outputModule: true,
+          };
+        },
+      },
+    },
+  ],
+});
+```
+
 ## 示例
 
 [Rslib 模块联邦示例](https://github.com/web-infra-dev/rslib/tree/main/examples/module-federation)