从 Create React App 迁移#

由于 @rspack/cli 内置了对 Typescript、JSX、CSS 等资源的支持，因此从 Create React App 迁移到 Rspack 是相对简单的。

更新依赖#

首先，我们需要更新依赖，将 Create React App 的依赖全部卸载，然后安装 @rspack/cli 依赖，并更新对应的启动脚本。

{
  "dependencies": {
-    "react-scripts": "5.0.1"
+    "@rspack/cli": "latest"
  },
  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test"
+    "start": "rspack serve",
+    "build": "rspack build"
  }
}

配置 rspack.config.js#

然后，我们需要在项目根目录下创建 rspack.config.js 文件，用于配置 Rspack 的相关选项， @rspack/cli 并未内置所有 CRA 的功能，因此还需要额外配置一些选项，具体配置如下：

const CopyPlugin = require('copy-webpack-plugin');

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: {
    main: './src/index.jsx', // 配置项目入口文件
  },
  builtins: {
    html: [
      {
        template: './index.html', // 对齐 CRA 生成index.html
      },
    ],
    copy: {
      patterns: [
        {
          from: 'public',
        },
      ],
    },
  },
};
module.exports = config;

迁移 eject 后的 CRA#

eject 后的 CRA 也算一个配置较为复杂的 webpack 项目，以下列举了迁移时主要做的几件事，详细的迁移配置前后的对比可以参考 rspack-migration-showcase/pull/6。

• 将 webpack 相关包替换为 Rspack 对应的包，并将调用的代码进行替换
  • webpack -> @rspack/core
  • webpack-dev-server -> @rspack/dev-server
  • html-webpack-plugin -> @rspack/plugin-html
• 将 Rspack 已内置支持的配置替换掉
  • style-loader、css-loader、MiniCssExtractPlugin 等 CSS 相关功能在 Rspack 中已内置支持
  • TerserWebpackPlugin、CssMinimizerPlugin 等代码压缩功能在 Rspack 中已内置支持，production 模式下默认开启
  • DefinePlugin 在 Rspack 中可通过 builtins.define 进行替代
  • ReactRefreshWebpackPlugin 在 Rspack 中已内置支持，可通过 builtins.react.refresh 开启或关闭
• 去掉 Rspack 目前还不完整支持的配置
  • cache 目前 Rspack 仅支持内存缓存，并会在 development 模式下默认开启
  • resolve.plugins 目前 Rspack 还不支持
  • CaseSensitivePathsPlugin、ESLintPlugin 等在 Rspack 中目前并不支持