# Rspack

Source: https://plumeria.dev/docs/integration/rspack





[`examples/rspack`](https://github.com/zss-in-js/plumeria/tree/main/examples/example-rspack) shows how to use [`@plumeria/unplugin`](https://www.npmjs.com/package/@plumeria/unplugin) in Rspack.\
It compiles styles into CSS via AST parsing, with HMR support.

`npx @plumeria/init` detects Rspack and writes this setup for you; see [@plumeria/init](/docs/api-reference/init). The rest of this page is the same setup by hand.

## Installation [#installation]

<Tabs items="['npm',  'yarn', 'pnpm']">
  <Tab>
    ```sh title="Terminal"
    npm i -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    yarn add -D @plumeria/unplugin
    ```
  </Tab>

  <Tab>
    ```sh title="Terminal"
    pnpm i -D @plumeria/unplugin
    ```
  </Tab>
</Tabs>

## Usage [#usage]

```ts title="rspack.config.js"
import { rspack } from '@rspack/core';
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
import plumeria from '@plumeria/unplugin';

const isDev = process.env.NODE_ENV === 'development';

export default {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: { syntax: 'typescript', tsx: true },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: isDev,
                  refresh: isDev,
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [
    plumeria.rspack(),
    new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
    isDev && new ReactRefreshRspackPlugin(),
  ].filter(Boolean),
  devServer: {
    hot: true,
    port: 3000,
  },
};
```

<Cards>
  <Card title="Shipping this as a component library" href="/docs/integration/component-library" />

  <Card title="See more about Installation unplugin" href="/docs/getting-started/installation" />
</Cards>