Preact
How to use
Rspack provides two solutions to support Preact:
- Use Rsbuild: Rsbuild provides out-of-the-box support for Preact, allowing you to quickly create a Preact project. See Rsbuild - Preact for details.
- Manually configure Rspack: You can refer to the current document to manually add configurations for Preact.
Configure JSX/TSX
Rspack leverages SWC transformer for JSX/TSX.
Add builtin:swc-loader loader to support jsx and tsx:
rspack.config.mjs
export default {
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
},
},
},
type: 'javascript/auto',
},
{
test: /\.tsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
},
},
},
},
type: 'javascript/auto',
},
],
},
};Refer to Builtin swc-loader for detailed configurations.
Refer to examples/preact for the full example.
Preact Refresh
To enable Preact Refresh, the following steps are required:
- Add the
@rspack/plugin-preact-refreshplugin to inject runtime code - Add the loader for code transformation
@rspack/plugin-preact-refresh
First you need to install the dependencies:
npm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -DThe enabling of the Preact Refresh is divided into two parts: code injection and code transformation
- Code injection: injects code that interacts with
@prefresh/coreand@prefresh/utils, which has been integrated in the @rspack/plugin-preact-refresh plugin - Code transformation requires a loader
- Use
builtin:swc-loaderorswc-loader- Enable
jsc.transform.react.refreshto support common react transformation - Add
@swc/plugin-prefreshintojsc.experimental.pluginsto support the specific transformation of preact
- Enable
- Use
babel-loaderand add official babel plugin of prefresh.
- Use
Warning
In versions below 1.0.0, Rspack did not support preact refresh with swc-loader.
builtin:swc-loader and enable preact specific transformation with rspackExperiments.preact: {}rspack.config.mjs
import PreactRefreshPlugin from '@rspack/plugin-preact-refresh';
const isDev = process.env.NODE_ENV === 'development';
export default {
// ...
mode: isDev ? 'development' : 'production',
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
experimental: {
plugins: [
[
'@swc/plugin-prefresh', // enable prefresh specific transformation
{
library: ['preact-like-framework'], // the customizable preact name, default is `["preact", "preact/compat", "react"]`
},
],
],
},
parser: {
syntax: 'ecmascript',
jsx: true,
},
transform: {
react: {
development: isDev,
refresh: isDev, // enable common react transformation
},
},
},
},
},
},
],
},
plugins: [
isDev && new PreactRefreshPlugin(),
isDev && new rspack.HotModuleReplacementPlugin(),
],
};Refer to examples/preact-refresh for the full example.