Rspack 深度解析：Rust 构建工具如何重塑前端工程化格局

1
// rspack.config.js - 是的，配置文件长得和 webpack.config.js 几乎一样
2
const { defineConfig } = require('@rspack/cli');
3
const { VueLoaderPlugin } = require('vue-loader');
4

5
module.exports = defineConfig({
6
  entry: './src/main.ts',
7
  module: {
8
    rules: [
9
      {
10
        test: /\.vue$/,
11
        loader: 'vue-loader',  // 直接用 vue-loader！
12
      },
13
      {
14
        test: /\.ts$/,
15
        loader: 'builtin:swc-loader',  // 内置 SWC，不需要 babel
16
        options: {
17
          jsc: {
18
            parser: { syntax: 'typescript' },
19
          },
20
        },
21
      },
22
      {
23
        test: /\.css$/,
24
        type: 'css',  // 内置 CSS 处理，不需要 css-loader
25
      },
26
    ],
27
  },
28
  plugins: [new VueLoaderPlugin()],
29
  optimization: {
30
    splitChunks: {
31
      // 和 Webpack 一模一样的 splitChunks 配置
32
      chunks: 'all',
33
      cacheGroups: {
34
        vendor: {
35
          test: /[\\/]node_modules[\\/]/,
36
          name: 'vendors',
37
          chunks: 'all',
38
        },
39
      },
40
    },
41
  },
42
});

1
// migration-checker.js - 迁移可行性检查脚本
2
const fs = require('fs');
3
const path = require('path');
4

5
function checkMigrationReadiness(projectRoot) {
6
  const webpackConfig = require(path.join(projectRoot, 'webpack.config.js'));
7
  const pkg = require(path.join(projectRoot, 'package.json'));
8
  const issues = [];
9
  const warnings = [];
10

11
  // 检查 loader 兼容性
12
  const riskyLoaders = [
13
    'thread-loader',     // Rspack 自带并行，不需要
14
    'cache-loader',      // Rspack 自带缓存，不需要
15
    'happypack',         // 同上
16
    'raw-loader',        // 用 type: 'asset/source' 替代
17
  ];
18

19
  const rules = webpackConfig.module?.rules || [];
20
  rules.forEach(rule => {
21
    const loaders = Array.isArray(rule.use) ? rule.use : [rule.use];
22
    loaders.forEach(loader => {
23
      const name = typeof loader === 'string' ? loader : loader?.loader;
24
      if (riskyLoaders.includes(name)) {
25
        warnings.push(`⚠️ ${name} 可以移除，Rspack 内置了等效功能`);
26
      }
27
    });
28
  });
29

30
  // 检查插件兼容性
31
  const unsupportedPlugins = [
32
    'ModuleFederationPlugin',  // 需要用 @module-federation/enhanced
33
  ];
34

35
  const plugins = webpackConfig.plugins || [];
36
  plugins.forEach(plugin => {
37
    const name = plugin.constructor.name;
38
    if (unsupportedPlugins.includes(name)) {
39
      issues.push(`❌ ${name} 需要替换为 Rspack 兼容版本`);
40
    }
41
  });
42

43
  return { issues, warnings, ready: issues.length === 0 };
44
}

1
// 坑1：require.context 的细微差异
2
// Webpack 写法（仍然兼容，但推荐改用 import.meta.webpackContext）
3
const modules = import.meta.webpackContext('./modules', {
4
  recursive: true,
5
  regExp: /\.ts$/,
6
});
7

8
// 坑2：自定义插件的 compiler.hooks 兼容性
9
// 大部分 hooks 兼容，但 normalModuleFactory 等底层 hooks 可能不同
10
// 解决方案：查看 Rspack 文档确认支持的 hooks 列表
11

12
// 坑3：CSS Modules 的 composes 语法
13
// Rspack 的内置 CSS 处理不支持 composes from 外部文件
14
// 解决方案：这种场景仍然使用 css-loader
15
{
16
  test: /\.module\.css$/,
17
  use: [
18
    { loader: 'css-loader', options: { modules: true } }
19
  ],
20
  type: 'javascript/auto',  // 告诉 Rspack 不要用内置 CSS 处理
21
}