Rspack 集成示例#

1// rspack.config.js
2const { FileBasedRouterRspack as fileBasedRouter } = require('@feoe/fs-router/rspack')
3
4module.exports = {
5  entry: './src/main.tsx',
6  plugins: [
7    fileBasedRouter({
8      routesDirectory: 'src/routes',
9      generatedRoutesPath: 'src/routes.tsx',
10      // 启用类型生成
11      enableGeneration: true,
12      typeGenerateOptions: {
13        routesTypeFile: "src/routes-type.ts",
14        // 微前端应用配置
15        routesDirectories: [
16          {
17            path: path.join(__dirname, "../shell/src/routes"),
18          },
19          {
20            prefix: "admin",
21            path: path.join(__dirname, "src/routes"),
22          },
23        ],
24      },
25    })
26  ],
27  module: {
28    rules: [
29      {
30        test: /\.tsx?$/,
31        use: 'builtin:swc-loader',
32        options: {
33          jsc: {
34            parser: {
35              syntax: 'typescript',
36              tsx: true,
37            },
38          },
39        },
40      },
41    ],
42  },
43}

1// 主应用配置
2const { FileBasedRouterRspack as fileBasedRouter } = require('@feoe/fs-router/rspack')
3
4module.exports = {
5  plugins: [
6    fileBasedRouter({
7      routesDirectory: 'src/routes',
8      generatedRoutesPath: 'src/routes.tsx',
9      enableGeneration: true,
10      typeGenerateOptions: {
11        routesTypeFile: "src/routes-type.ts",
12        routesDirectories: [
13          // 主应用路由
14          {
15            path: path.join(__dirname, "src/routes"),
16          },
17          // 子应用路由
18          {
19            prefix: "admin",
20            path: path.join(__dirname, "../admin/src/routes"),
21          },
22          {
23            prefix: "user",
24            path: path.join(__dirname, "../user/src/routes"),
25          },
26        ],
27      },
28    })
29  ]
30}