Rspack Configs for build react app from scratch (support js, jsx, ts and tsx)

README.md

Overiew

The @babel/preset-flow, animate.css, wow.js and http-server are depends not required.

Required dependencies

pnpm add -D babel-loader @babel/core @babel/preset-env @babel/preset-react @rspack/cli @rspack/core @rspack/dev-server @rspack/plugin-react-refresh react-refresh css-loader sass-loader style-loader react react-dom

package.json

{
	"scripts": {
		"start": "rspack serve --mode development",
		"build": "rspack --mode production"
	},
	"dependencies": {
		"@babel/preset-flow": "^7.24.7",
		"animate.css": "^4.1.1",
		"babel-core": "^6.26.3",
		"babel-loader": "^9.1.3",
		"http-server": "^14.1.1",
		"wow.js": "^1.2.2"
	},
	"devDependencies": {
		"@babel/core": "^7.25.2",
		"@babel/preset-env": "^7.25.4",
		"@babel/preset-react": "^7.24.7",
		"@rspack/cli": "^1.0.0",
		"@rspack/core": "^1.0.0",
		"@rspack/dev-server": "^1.0.0",
		"@rspack/plugin-react-refresh": "^1.0.0",
		"css-loader": "^7.1.2",
		"html-webpack-plugin": "^5.6.0",
		"react": "^18.3.1",
		"react-dom": "^18.3.1",
		"react-refresh": "^0.14.2",
		"sass": "^1.77.8",
		"sass-loader": "^16.0.1",
		"style-loader": "^4.0.0"
	}
}

rspack.config.js

const path = require('path');
const ReactRefreshPlugin = require("@rspack/plugin-react-refresh");

const rspack = require('@rspack/core')

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, "dist"),
    },
    plugins: [
      new rspack.HtmlRspackPlugin({
        template: path.join(__dirname, "index.html"),
      }),
      isDevelopment && new ReactRefreshPlugin()
    ].filter(Boolean),
    module: { 
        rules: [
          {
            test: /\.?([jt]sx?)$/, // Support files .js, .jsx, .ts e .tsx
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  '@babel/preset-env', 
                  [
                    '@babel/preset-react',
                    {
                      runtime: 'automatic'
                    }
                  ]
                ],
                plugins: [isDevelopment &&  require.resolve('react-refresh/babel')]
              }
            }
          },
          {
            test: /\.s[ac]ss$/i,
            use: [
              'style-loader',
              'css-loader',
              'sass-loader'
            ],
          }
        ]
    },
    mode: isDevelopment ? 'development' : 'production',
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
    devServer: {
      port: 3000,
      hot: true,
    },
};