Migrate from Create React App#

Since @rspack/cli has built-in support for TypeScript, JSX, CSS, etc., it is relatively easy to migrate from the Create React App.

Updating dependencies#

First, we need to update the dependencies, uninstall all the Create React App dependencies, then install the @rspack/cli dependencies and update the corresponding startup scripts.

{
  "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"
  }
}

Configure rspack.config.js#

Then, we need to create the rspack.config.js file in the root of the project to configure rspack-related options. @rspack/cli does not have all the CRA functionality built-in, so some additional options need to be configured as follows

/** @type {import('@rspack/cli').Configuration} */
const config = {
  entry: {
    main: './src/index.jsx', // Configure the project entry file
  },
  builtins: {
    html: [
      {
        template: './index.html', // Align CRA to generate index.html
      },
    ],
    copy: {
      patterns: [
        {
          from: 'public',
        },
      ],
    },
  },
};
module.exports = config;

migrate ejected CRA to Rspack#

After ejecting the CRA is also considered a more complex webpack project configuration, the following lists the main things to do when migrating, the detailed code can be referred to rspack-migration-showcase/pull/6。

• Replace the webpack package with the corresponding Rspack package and replace the calling code
  • webpack -> @rspack/core
  • webpack-dev-server -> @rspack/dev-server
  • html-webpack-plugin -> @rspack/plugin-html
• Replaces the configuration that Rspack already has built-in support for
  • CSS-related functions such as style-loader, css-loader, MiniCssExtractPlugin, etc. have built-in support in Rspack
  • TerserWebpackPlugin, CssMinimizerPlugin and other code compression features have built-in support in Rspack, and are enabled by default in production mode.
  • DefinePlugin can be replaced in Rspack by builtins.define
  • ReactRefreshWebpackPlugin has built-in support in Rspack and can be turned on or off with builtins.react.refresh
• Remove configurations that are not currently fully supported by Rspack
  • Currently cache in Rspack only supports memory caching, and it is enabled by default in development mode
  • resolve.plugins is not currently supported by Rspack
  • CaseSensitivePathsPlugin, ESLintPlugin, etc. are not currently supported in Rspack