Rspack

https://rspack.rs/guide
Admin
Rspack is a high-performance, low-level web bundler built in Rust, offering fast build times and...
Tokens:45,668
Snippets:430
Trust Score:8.3
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install Rspack Canary Version using install-rspack (Shell)

Source: https://rspack.rs/guide/start/quick-start

These commands show how to use the `install-rspack` tool to install different versions of Rspack. You can install the latest available version, the general canary version, or a specific canary version by commit hash.

```shell
npx install-rspack --version latest
```

```shell
npx install-rspack --version canary
```

```shell
npx install-rspack --version 1.0.0-canary-d614005-20250101082730
```

--------------------------------

### Manual Installation of Rspack Core and CLI

Source: https://rspack.rs/guide/start/quick-start

Manually install Rspack's core and CLI packages as development dependencies. This involves creating a project directory, initializing npm, and then adding the packages using a package manager.

```bash
mkdir rspack-demo
cd rspack-demo
npm init -y
npm install @rspack/core @rspack/cli -D
```

--------------------------------

### Create New Rspack or Rsbuild Project

Source: https://rspack.rs/guide/start/quick-start

Use the create command to initialize a new Rspack or Rsbuild project. This command typically involves a package manager and installs the necessary scaffolding for a new project.

```bash
# Using Rsbuild
npx -y create-rsbuild@latest

# Using Rspack CLI
npx -y create-rspack@latest
```

--------------------------------

### Non-interactive Project Creation with Rspack CLI or Rsbuild

Source: https://rspack.rs/guide/start/quick-start

Create Rspack or Rsbuild projects non-interactively using command-line options. This is useful for automation, scripts, and CI environments. It allows specifying the directory and template directly.

```bash
# Rspack CLI
npx -y create-rspack --dir my-app --template react

# Rsbuild
npx -y create-rsbuild --dir my-app --template react

# Using abbreviations
npx -y create-rsbuild -d my-app -t react
```

--------------------------------

### Pass Configuration Options to PostCSS Loader

Source: https://rspack.rs/guide/features/loader

This configuration illustrates how to pass specific options to a loader, using 'postcss-loader' as an example. The 'options' property within the loader configuration allows for detailed settings, such as 'postcssOptions', to customize the loader's behavior.

```javascript
export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};
```

--------------------------------

### Create and Use a Custom Banner Loader

Source: https://rspack.rs/guide/features/loader

This example demonstrates creating a custom JavaScript loader ('banner-loader.js') that prepends a banner comment to module content. It also shows how to configure Rspack to use this custom loader for .js files by specifying its path in the 'loader' property.

```javascript
const BANNER = `/**
 * MIT Licensed
 * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
 * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
 */`;

module.exports = function (content) {
  return `${BANNER}\n${content}`;
};
```

```javascript
export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: './banner-loader.js',
      },
    ],
  },
};
```

--------------------------------

### Configure Package.json Scripts for Rspack CLI

Source: https://rspack.rs/guide/start/quick-start

Update the 'scripts' section in your package.json file to use Rspack CLI commands for development, building, and previewing. This allows you to run Rspack tasks using npm scripts.

```json
{
  "scripts": {
    "dev": "rspack dev",
    "build": "rspack build",
    "preview": "rspack preview"
  }
}
```

--------------------------------

### Configure Package Manager Overrides for Rspack Canary (JSON)

Source: https://rspack.rs/guide/start/quick-start

This snippet demonstrates how to configure `pnpm` overrides in `package.json` to use the canary version of `@rspack/core`. It ensures that the canary package is used instead of the stable one, and manages peer dependencies.

```json
{
  "pnpm": {
    "overrides": {
      "@rspack/core": "npm:@rspack-canary/core@latest"
    },
    "peerDependencyRules": {
      "allowAny": ["@rspack/*"]
    }
  }
}
```

--------------------------------

### Configure rspackExperiments.import with customName and helper (JavaScript)

Source: https://rspack.rs/guide/features/builtin-swc-loader

This example demonstrates using rspackExperiments.import with a 'customName' template that includes a helper function, 'kebabCase'. This allows for transforming imported member names into kebab-case, which is useful for libraries that follow this naming convention for their modules. The 'libraryName' is set to 'foo'.

```javascript
export default {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          rspackExperiments: {
            import: [
              {
                libraryName: 'foo',
                customName: 'foo/es/{{ kebabCase member }}',
              },
            ],
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Example Barrel File (JavaScript)

Source: https://rspack.rs/guide/optimization/lazy-barrel

This JavaScript code demonstrates a typical barrel file exporting components from other modules. Barrel files are used to consolidate exports into a single entry point for cleaner imports.

```javascript
export { Button } from './Button';
export { Card } from './Card';
export { Modal } from './Modal';
export { Tabs } from './Tabs';
// ... dozens more components
```

--------------------------------

### Multiple Entry Points for Code Splitting (Rspack Config)

Source: https://rspack.rs/guide/optimization/code-splitting

Configures Rspack to create multiple entry points, each generating its own chunk. This approach is straightforward for splitting code but requires manual setup. It's useful for applications where distinct sections can be loaded independently.

```javascript
export default {
  mode: 'development',
  entry: {
    index: './src/index.js',
    another: './src/another-module.js',
  },
  stats: 'normal',
};
```

```javascript
import './shared';
console.log('index.js');
```

```javascript
import './shared';
console.log('another-module');
```

--------------------------------

### SharedWorker Creation with Rspack

Source: https://rspack.rs/guide/features/web-workers

Illustrates the syntax for creating and starting a SharedWorker in Rspack. SharedWorkers allow multiple browsing contexts (like iframes or tabs) from the same origin to communicate with each other.

```javascript
const sharedWorker = new SharedWorker(
  new URL('./shared-worker.js', import.meta.url)
);
sharedWorker.port.start();
```

--------------------------------

### Configure Next.js to use Rspack (TypeScript)

Source: https://rspack.rs/guide/tech/next

This snippet demonstrates how to wrap your Next.js configuration with `withRspack` in a `next.config.ts` file to enable Rspack as the bundler. Ensure you have the `next-rspack` package installed.

```typescript
import withRspack from 'next-rspack';
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* config options here */
};

export default withRspack(nextConfig);
```

--------------------------------

### Install Rspack using package managers

Source: https://rspack.rs/guide/migration/webpack

Installs Rspack and its CLI as development dependencies. This command should be run in your project directory.

```bash
npm install @rspack/core @rspack/cli -D
# or
yarn add @rspack/core @rspack/cli -D
# or
pnpm add @rspack/core @rspack/cli -D
```

--------------------------------

### Customize Rspack Configuration in Next.js

Source: https://rspack.rs/guide/tech/next

This example illustrates how to customize Rspack's configuration within a Next.js project by providing a `webpack` callback function in `next.config.js`. This allows for fine-grained control over bundler settings, similar to webpack customization.

```javascript
module.exports = {
  webpack: (
    config,
    {
      buildId,
      dev,
      isServer,
      defaultLoaders,
      nextRuntime,
      webpack,
    },
  ) => {
    // Important: return the modified config
    return config;
  },
};
```

--------------------------------

### Configure SWC Wasm Plugin in Rspack

Source: https://rspack.rs/guide/features/builtin-swc-loader

Shows how to configure SWC's experimental Wasm plugins within Rspack's `builtin:swc-loader`. This example demonstrates loading the `@swc/plugin-remove-console` plugin with specific options, highlighting the need for version compatibility between SWC and the plugin.

```js
export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              experimental: {
                plugins: [
                  [
                    '@swc/plugin-remove-console',
                    {
                      exclude: ['error'],
                    },
                  ],
                ],
              },
            },
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Use webpack-bundle-analyzer Plugin in Rspack

Source: https://rspack.rs/guide/features/plugin

Demonstrates how to integrate the webpack-bundle-analyzer plugin into Rspack's configuration. This plugin helps visualize the bundle composition. It requires the 'webpack-bundle-analyzer' package to be installed.

```javascript
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';

export default {
  plugins: [
    new BundleAnalyzerPlugin({
      // options
    }),
  ],
};
```

```javascript
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      // options
    }),
  ],
};
```

--------------------------------

### Chain Multiple Loaders for Less Files

Source: https://rspack.rs/guide/features/loader

This example shows how to chain multiple loaders for processing .less files. It uses 'less-loader' to convert Less to CSS and then 'postcss-loader' to further transform the CSS before Rspack's CSS post-processor handles it. Loaders are executed in right-to-left order.

```javascript
export default {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
        type: 'css',
      },
    ],
  },
};
```

--------------------------------

### Configure Module Federation v2.0 with Rspack

Source: https://rspack.rs/guide/features/module-federation

This snippet shows how to configure Module Federation v2.0 in Rspack by importing and using the ModuleFederationPlugin from '@module-federation/enhanced/rspack'. Ensure you have the necessary plugin installed. The 'options' object should be configured according to your project's specific needs.

```javascript
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

export default {
  plugins: [
    new ModuleFederationPlugin({
      // options
    }),
  ],
};

```

--------------------------------

### Configure Babel for React Compiler

Source: https://rspack.rs/guide/tech/react

This configuration sets up the babel.config.js file to include the babel-plugin-react-compiler. It also shows how to specify a target version for older React projects.

```javascript
const ReactCompilerConfig = {
  /* ... */
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig], // must run first!
      '@babel/plugin-syntax-jsx',
    ],
  };
};
```

```javascript
const ReactCompilerConfig = {
  target: '18', // '17' | '18' | '19' 
};

module.exports = function () {
  return {
    plugins: [
      ['babel-plugin-react-compiler', ReactCompilerConfig],
      '@babel/plugin-syntax-jsx',
    ],
  };
};
```

--------------------------------

### Install Storybook Rsbuild Dependencies

Source: https://rspack.rs/guide/migration/storybook

Installs the necessary packages for migrating Storybook from webpack to Rsbuild. This includes the Rsbuild core, the React plugin, and the specific Storybook Rsbuild package for React projects. For Vue, use 'storybook-vue3-rsbuild' and '@rsbuild/plugin-vue'.

```bash
npm install storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
# or
yarn add storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
# or
pnpm add storybook-react-rsbuild @rsbuild/core @rsbuild/plugin-react -D
```

--------------------------------

### Enable React Fast Refresh with SWC Loader in Rspack

Source: https://rspack.rs/guide/tech/react

This configuration enables React Fast Refresh for development environments using SWC loader and Rspack's HotModuleReplacementPlugin. It requires installing '@rspack/plugin-react-refresh' and 'react-refresh'. The configuration injects necessary code and transforms it for refresh functionality.

```javascript
import { rspack } from '@rspack/core';
import ReactRefreshPlugin from '@rspack/plugin-react-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: {
              parser: {
                syntax: 'ecmascript',
                jsx: true,
              },
              transform: {
                react: {
                  development: isDev,
                  refresh: isDev,
                },
              },
            },
          },
        },
      },
    ],
  },
  plugins: [
    isDev && new ReactRefreshPlugin(),
    isDev && new rspack.HotModuleReplacementPlugin(),
  ],
};
```

--------------------------------

### Configure lightningcss-loader in Rspack

Source: https://rspack.rs/guide/features/builtin-lightningcss-loader

Example demonstrating how to configure the `builtin:lightningcss-loader` within Rspack's module rules. It specifies the loader to use for `.css` files and includes basic options like `targets` for browser compatibility.

```javascript
import { rspack } from '@rspack/core';

export default {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'builtin:lightningcss-loader',
            options: {
              targets: 'ie 10',
            },
          },
          // ... other loaders
        ],
      },
    ],
  },
};
```

--------------------------------

### Rspack Module Factory Hook Example

Source: https://rspack.rs/guide/migration/rspack_0

Demonstrates how to use the `normalModuleFactory.hooks.resolve` hook to redirect module requests. This can be used as a replacement for the deprecated `Resolver`'s `resolve` hook functionality.

```javascript
compiler.hooks.normalModuleFactory.tap('PLUGIN', (normalModuleFactory) => {
  normalModuleFactory.hooks.resolve.tap('PLUGIN', (data) => {
    // Redirect the module
    if (data.request === './foo.js') {
      data.request = './bar.js';
    }
  });
});
```

--------------------------------

### Re-export Analysis Optimization in JavaScript

Source: https://rspack.rs/guide/optimization/tree-shaking

Demonstrates how Rspack optimizes re-exports by analyzing dependencies and directly importing from the actual source module, reducing unnecessary module loads. This is enabled by default with `optimization.providedExports`.

```javascript
import { value } from './re-exports.js';
console.log(value);
```

```javascript
export * from './value.js';
export * from './other.js'; // this can be removed if `other.js` does not have any side effects
```

```javascript
export const value = 42;
export const foo = 42; // not used
```

```diff
- import { value } from './re-exports.js';
+ import { value } from './value.js';
console.log(value);
```

--------------------------------

### Configuration Options for ESM Output

Source: https://rspack.rs/guide/features/esm

This section outlines the key configuration options for enabling and customizing ESM output in Rspack, along with their impact on other settings.

```APIDOC
## Configuration Options for ESM Output

This section details the primary configuration options for generating ESM (ECMAScript Module) output with Rspack.

### 1. `output.module`

- **Description**: Set to `true` to generate output in ESM format. Enabling this option influences several other configurations:
  - **`externalsType`**: Defaults to `'module-import'`.
  - **`output.filename`**: Defaults to `'[name].mjs'`.
  - **`output.chunkFilename`**: Defaults to `'[id].mjs'`.
  - **`output.hotUpdateChunkFilename`**: Defaults to `'[id].[fullhash].hot-update.mjs'`.
  - **`output.hotUpdateMainFilename`**: Defaults to `'[runtime].[fullhash].hot-update.json.mjs'`.
  - **`output.iife`**: Defaults to `false`.
  - **`output.library.type`**: Defaults to `'module'`.
  - **`output.scriptType`**: Defaults to `'module'`.
  - **`output.environment.dynamicImport`**: Enabled.
  - **`output.environment.dynamicImportInWorker`**: Enabled.
  - **`output.environment.module`**: Enabled.
  - **Node.js environment**: `__filename` and `__dirname` default to `'node-module'`.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 2. `output.chunkFormat`

- **Description**: Set to `'module'` to specify that chunks should be in ESM format.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 3. `output.library.type`

- **Description**: Set to `'modern-module'` for optimized ESM output for libraries.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 4. `output.chunkLoading`

- **Description**: Set to `'import'` to use ESM `import` for loading chunks.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 5. `output.workerChunkLoading`

- **Description**: Set to `'import'` to use ESM `import` for loading worker chunks.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 6. `optimization.concatenateModules`

- **Description**: This option must be enabled for `'modern-module'` to ensure proper tree-shaking and library exports.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 7. `optimization.avoidEntryIife`

- **Description**: Addresses cases where Rspack wraps ESM output in an IIFE, which can interfere with ESM's modular characteristics.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 8. `experiments.outputModule`

- **Description**: Enable this experimental feature, which is required for `output.module` to function.
- **Method**: Configuration Option
- **Endpoint**: N/A

### 9. `HtmlWebpackPlugin.scriptLoading`

- **Description**: Set to `'module'` to use `<script type="module">` for loading `.mjs` modules when using `HtmlWebpackPlugin`.
- **Method**: Configuration Option
- **Endpoint**: N/A
```

--------------------------------

### collectTypeScriptInfo.exportedEnum Configuration

Source: https://rspack.rs/guide/features/builtin-swc-loader

This section details the configuration of the `exportedEnum` option within `collectTypeScriptInfo` in `rspack.config.mjs`. It explains the possible values and their impact on enum optimization.

```APIDOC
## collectTypeScriptInfo.exportedEnum

### Description
Controls whether Rspack collects information about exported `enum`s to perform cross-module inline optimization.

### Method
Configuration Option

### Endpoint
N/A

### Parameters
#### Configuration Parameters
- **`exportedEnum`** (boolean | 'const-only') - Required - Determines how enum information is collected. 
  - `true`: Collects all enum information (const and regular enums).
  - `false`: Does not collect any enum information.
  - `'const-only'`: Collects only const enum information for optimization.

#### Request Body
N/A

### Request Example
```javascript
// rspack.config.mjs
export default {
  // ... other configurations
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                parser: {
                  syntax: 'typescript',
                },
              },
              collectTypeScriptInfo: {
                exportedEnum: true, // or false, or 'const-only'
              },
            },
          },
        ],
      },
    ],
  },
  experiments: {
    // This option might be related to experimental features like inline enum
    inlineEnum: true 
  }
};
```

### Response
#### Success Response (N/A)
This is a configuration option, not an endpoint that returns a response.

#### Response Example
N/A

### Notes
- This feature relies on `optimization.usedExports`. It's recommended to enable it only when `mode = "production"`.
- For `const-only` configuration, it is recommended to set `transform.tsEnumIsMutable = true`.
```

--------------------------------

### Integrate next-rspack with next-compose-plugins

Source: https://rspack.rs/guide/tech/next

This snippet demonstrates how to use `next-compose-plugins` to seamlessly integrate `next-rspack` with other Next.js plugins. This simplifies the management of multiple configurations in your `next.config.js` file.

```javascript
const withPlugins = require('next-compose-plugins');
const withRspack = require('next-rspack');

module.exports = withPlugins([
  [withRspack],
  // your other plugins here
]);
```

--------------------------------

### Enable Lazy Compilation with Rspack CLI

Source: https://rspack.rs/guide/features/lazy-compilation

Enables lazy compilation for both entries and dynamic imports in Rspack CLI configurations. This speeds up dev server startup by compiling modules only when needed.

```javascript
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    Home: './src/Home.js',
    About: './src/About.js',
  },
  lazyCompilation: true,
});
```

```javascript
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    Home: './src/Home.js',
    About: './src/About.js',
  },
  lazyCompilation: {
    // lazy compile entries
    entries: true,
    // lazy compile dynamic imports
    imports: true,
  },
});
```

--------------------------------

### Rspack JSON Import Attributes

Source: https://rspack.rs/guide/tech/json

Shows how to use import attributes with Rspack to explicitly import JSON files, aligning with the import attributes proposal.

```typescript
import json from './example.json' with { type: 'json' };
import('./example.json', { with: { type: 'json' } });
```

--------------------------------

### Use unplugin-vue-components Plugin in Rspack

Source: https://rspack.rs/guide/features/plugin

Shows how to use the unplugin-vue-components plugin within Rspack by importing from its '/rspack' subpath. This facilitates automatic component registration. Ensure 'unplugin-vue-components' is installed.

```javascript
import Components from 'unplugin-vue-components/rspack';

export default {
  plugins: [
    Components({
      // options
    }),
  ],
};
```

```javascript
const Components = require('unplugin-vue-components/rspack');

module.exports = {
  plugins: [
    Components.default({
      // options
    }),
  ],
};
```

--------------------------------

### Default Export in Barrel File (JavaScript)

Source: https://rspack.rs/guide/optimization/lazy-barrel

Example of a default export from a barrel file. For lazy barrel optimization purposes, default exports are treated under the name 'default'.

```javascript
export default function App() {
  /* ... */
}
```

--------------------------------

### Configure Rspack Minification with SwcJsMinimizer and LightningCssMinimizer

Source: https://rspack.rs/guide/optimization/production

Configures Rspack to use SwcJsMinimizerRspackPlugin for JavaScript minification and LightningCssMinimizerRspackPlugin for CSS minification during production builds. This allows for customization of the minification process. Ensure '@rspack/core' is installed as a dependency.

```javascript
import { rspack } from '@rspack/core';

export default {
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin({
        // JS minimizer configuration
      }),
      new rspack.LightningCssMinimizerRspackPlugin({
        // CSS minimizer configuration
      }),
    ],
  },
};
```

--------------------------------

### Basic Web Worker Creation with Rspack

Source: https://rspack.rs/guide/features/web-workers

Demonstrates the fundamental syntax for creating a new Web Worker in Rspack using the standard URL constructor. This method is compliant with ECMAScript modules and works natively in modern browsers.

```javascript
new Worker(new URL('./worker.js', import.meta.url));
```

--------------------------------

### Specify Layers via Entry Configuration in Rspack

Source: https://rspack.rs/guide/features/layer

This snippet shows how to assign specific layers ('server' and 'client') to different entry points in the Rspack configuration. This allows modules originating from these entry points and their dependencies to be grouped under their respective layers for differentiated processing.

```javascript
export default {
  entry: {
    server: {
      import: './src/server.js',
      layer: 'server',
    },
    client: {
      import: './src/client.js',
      layer: 'client',
    },
  },
};
```

--------------------------------

### Dynamic Import in JavaScript

Source: https://rspack.rs/guide/optimization/code-splitting

Demonstrates dynamic module loading using the `import()` syntax. This method separates modules into new chunks, which can be loaded on demand. It's essential for optimizing initial load times by deferring the loading of non-critical code.

```javascript
import('./foo.js');
import('./bar.js');
```

```javascript
import './shared.js';
console.log('foo.js');
```

```javascript
import './shared.js';
console.log('bar.js');
```

--------------------------------

### Enable Rspack Build Profiling with RSPACK_PROFILE

Source: https://rspack.rs/guide/optimization/profile

Enables detailed build performance profiling in Rspack by setting the RSPACK_PROFILE environment variable to 'ALL'. This generates a trace.json file within a timestamped folder, which can be visualized using ui.perfetto.dev for in-depth analysis of build processes and bottlenecks.

```sh
RSPACK_PROFILE=ALL rspack build
```

--------------------------------

### Create Rspack Plugin with TypeScript

Source: https://rspack.rs/guide/features/plugin

This snippet shows how to define a Rspack plugin using TypeScript. It imports necessary types from '@rspack/core' and implements the 'apply' method to hook into the Rspack compilation process. The plugin logs a message when compilation starts.

```typescript
import type { Compiler, RspackPluginInstance } from '@rspack/core';

const PLUGIN_NAME = 'MyPlugin';

export class MyPlugin implements RspackPluginInstance {
  apply(compiler: Compiler) {
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      console.log('The Rspack build process is starting!');
    });
  }
}
```

--------------------------------

### Enable Type Hints for SWC Loader in Rspack (TypeScript)

Source: https://rspack.rs/guide/features/builtin-swc-loader

Illustrates how to enable type hints for SWC loader options in Rspack's TypeScript configuration file using `import type` and `satisfies` for precise type checking. This enhances code safety and maintainability.

```ts
import type { SwcLoaderOptions } from '@rspack/core';

export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            // some options
          } satisfies SwcLoaderOptions,
        },
      },
    ],
  },
};
```

--------------------------------

### Write a Custom Rspack Plugin

Source: https://rspack.rs/guide/features/plugin

Provides a basic structure for creating a custom Rspack plugin. Plugins implement an `apply` method that receives a `Compiler` instance, allowing interaction with Rspack's build lifecycle hooks.

```javascript
const PLUGIN_NAME = 'MyPlugin';

export class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      console.log('The Rspack build process is starting!');
    });
  }
}
```

```javascript
const PLUGIN_NAME = 'MyPlugin';

class MyPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
      console.log('The Rspack build process is starting!');
    });
  }
}

module.exports = MyPlugin;
```

--------------------------------

### Configure JSX and TSX with SWC Loader in Rspack

Source: https://rspack.rs/guide/tech/react

This configuration enables SWC loader to process .jsx and .tsx files in Rspack. It specifies the parser syntax (ECMAScript with JSX or TypeScript with TSX) for transforming React components. Ensure SWC loader is installed.

```javascript
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',
      },
    ],
  },
};
```

--------------------------------

### Manual Preload Control for Dynamic Imports in Rspack

Source: https://rspack.rs/guide/optimization/code-splitting

Demonstrates how to manually control the loading of dynamic imports using async script tags with custom error handling. This approach is beneficial for scenarios like streaming server-side rendering and ensures that script loading failures are handled gracefully without relying on Rspack's default timeouts.

```javascript
const lazyComp = () =>
  import('DynamicComponent').catch((error) => {
    // Do something with the error.
    // For example, we can retry the request in case of any net error
  });
```

```html
<script
  src="https://example.com/dist/dynamicComponent.js"
  async
  onerror="this.remove()">
</script>
```

--------------------------------

### rspackExperiments.import Configuration

Source: https://rspack.rs/guide/features/builtin-swc-loader

This section details how to configure the `rspackExperiments.import` option to customize module imports. It supports custom name transformations using template strings and built-in helpers, as well as automatic style imports for libraries like Ant Design.

```APIDOC
## rspackExperiments.import

### Description

Configures advanced module importing strategies, ported from `babel-plugin-import`. It allows for custom path transformations using template strings and built-in helpers, and can automatically import associated style files.

### Method

Configuration within `rspack.config.mjs`

### Endpoint

N/A (Configuration Option)

### Parameters

#### Request Body (within `rspackExperiments.import` array)

- **libraryName** (string) - Required - The name of the library to configure.
- **customName** (string) - Optional - A template string to customize the import path. `{{ member }}` will be replaced by the imported specifier. Supports helpers like `kebabCase`, `camelCase`, `snakeCase`, `upperCase`, `lowerCase`, `legacyKebabCase`, `legacySnakeCase`.
- **style** (string | boolean) - Optional - If a string, specifies a template for importing style files (e.g., `{{ member }}/style/index.css`). If `true`, it attempts to import the default style path (e.g., `{{ member }}/style`).

### Request Example

```js
{
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          rspackExperiments: {
            import: [
              {
                libraryName: 'foo',
                customName: 'foo/es/{{ member }}',
              },
              {
                libraryName: 'antd',
                style: '{{member}}/style/index.css'
              }
            ]
          }
        }
      }
    ]
  }
}
```

### Response

#### Success Response (Transformation)

- **Transformed Import Statements** (Code) - The original import statements are transformed based on the provided configuration.

#### Response Example

For `import { MyButton as Btn } from 'foo';` with `customName: 'foo/es/{{ member }}'`: 
```ts
import Btn from 'foo/es/MyButton';
```

For `import { Button } from 'antd';` with `style: '{{member}}/style/index.css'`: 
```ts
import Button from 'antd/es/button';
import 'antd/es/button/style/index.css';
```

For `import { Button } from 'antd';` with `style: true`: 
```ts
import Button from 'antd/es/button';
import 'antd/es/button/style';
```

### Notes

- Using template strings for `customName` and `style` is more performant than using functions.
- Refer to [babel-plugin-import](https://www.npmjs.com/package/babel-plugin-import) for more configurations.
```

--------------------------------

### Configure Rspack for Solid.js

Source: https://rspack.rs/guide/tech/solid

This configuration snippet demonstrates how to set up Rspack to handle Solid.js JSX files. It utilizes 'babel-loader' with the 'solid' preset and the 'solid-refresh/babel' plugin for features like Fast Refresh. This is essential for projects using Solid.js with Rspack.

```javascript
import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    main: './src/index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['solid'],
              plugins: ['solid-refresh/babel'],
            },
          },
        ],
      },
    ],
  },
});
```

--------------------------------

### JavaScript Syntax Lowering with jsc.target

Source: https://rspack.rs/guide/features/builtin-swc-loader

Configure the built-in SWC loader to transpile JavaScript code to a specific ECMA version using the `jsc.target` option. This ensures compatibility with older JavaScript environments. For example, targeting 'es2015' will lower syntax to ES6 standards.

```javascript
export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              target: 'es2015',
            },
            // ...other options
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Enable Type Hints for SWC Loader in Rspack (JavaScript)

Source: https://rspack.rs/guide/features/builtin-swc-loader

Demonstrates how to enable type hints for SWC loader options in Rspack's JavaScript configuration file using the `SwcLoaderOptions` type from `@rspack/core`. This improves developer experience by providing autocompletion and type checking.

```js
export default {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'builtin:swc-loader',
          /** @type {import('@rspack/core').SwcLoaderOptions} */
          options: {
            // some options
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Prefetching Modules for Future Navigation with Rspack

Source: https://rspack.rs/guide/optimization/code-splitting

Utilize the `webpackPrefetch: true` directive in dynamic imports to instruct Rspack to generate resource hints for modules likely needed in future navigations. This allows the browser to fetch these resources during idle time, improving perceived performance for subsequent user actions.

```javascript
//... import(/* webpackPrefetch: true */ './path/to/LoginModal.js');
```

--------------------------------

### Configure Chunk Splitting with minSize (Rspack Config)

Source: https://rspack.rs/guide/optimization/code-splitting

Adjusts Rspack's chunk splitting behavior by setting `optimization.splitChunks.minSize` to 0. This allows even small modules, like `shared.js` in the example, to be extracted into their own chunks, which can be beneficial for managing dependencies but might lead to more network requests.

```javascript
export default {
  entry: {
    index: './src/index.js',
  },
  optimization: {
    splitChunks: {
      minSize: 0,
    }
  }
};
```

--------------------------------

### Install Rsdoctor Rspack Plugin

Source: https://rspack.rs/guide/optimization/use-rsdoctor

Installs the Rsdoctor Rspack plugin as a development dependency. This plugin is essential for integrating Rsdoctor's build analysis capabilities into your Rspack project.

```bash
npm install @rsdoctor/rspack-plugin -D
yarn add @rsdoctor/rspack-plugin -D
pnpm add @rsdoctor/rspack-plugin -D
```

--------------------------------

### Remove webpack dependencies

Source: https://rspack.rs/guide/migration/webpack

Removes webpack and related development dependencies from your project. This step is typically performed after successfully installing Rspack.

```bash
npm uninstall webpack webpack-cli webpack-dev-server
# or
yarn remove webpack webpack-cli webpack-dev-server
# or
pnpm uninstall webpack webpack-cli webpack-dev-server
```

--------------------------------

### Replace raw-loader with asset/source in Rspack

Source: https://rspack.rs/guide/features/asset-module

This example demonstrates replacing 'raw-loader' with Rspack's 'asset/source' type using a resource query. 'asset/source' exports the asset file content as a raw string, useful for text-based assets.

```diff
export default {
  module: {
    rules: [
      {
        resourceQuery: /raw/,
-       use: [
-         {
-           loader: 'raw-loader',
-         },
-       ],
+       type: 'asset/source'
      },
    ],
  },
};
```

--------------------------------

### Configure rspackExperiments.import for Ant Design styles (JavaScript)

Source: https://rspack.rs/guide/features/builtin-swc-loader

This configuration snippet shows how to use rspackExperiments.import to automatically import CSS style files for Ant Design components. It specifies the 'libraryName' as 'antd' and uses the 'style' option with a template string to map the imported member to its corresponding style file path. This simplifies the process of including Ant Design's styles in your project.

```javascript
export default {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          rspackExperiments: {
            import: [
              {
                libraryName: 'antd',
                style: '{{member}}/style/index.css',
              },
            ],
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Configure rspackExperiments.import for Ant Design default styles (JavaScript)

Source: https://rspack.rs/guide/features/builtin-swc-loader

This configuration demonstrates a simpler way to import Ant Design styles using rspackExperiments.import. When 'style' is set to 'true', Rspack will automatically import the default style file for the component. This is a convenient option for projects that use Ant Design and want to include its default styling without explicit configuration for each component's style path.

```javascript
export default {
  module: {
    rules: [
      {
        use: 'builtin:swc-loader',
        options: {
          rspackExperiments: {
            import: [
              {
                libraryName: 'antd',
                style: true,
              },
            ],
          },
        },
      },
    ],
  },
};
```

--------------------------------

### Rspack JSON Default Import

Source: https://rspack.rs/guide/tech/json

Demonstrates the default import of a JSON file in Rspack. This allows you to import an entire JSON object and access its properties.

```json
{
  "foo": "bar"
}
```

```typescript
import json from './example.json';
console.log(json.foo); // "bar"
```

--------------------------------

### Replacing worker-loader with worker-rspack-loader (CJS)

Source: https://rspack.rs/guide/features/web-workers

Configures Rspack to use `worker-rspack-loader` as a replacement for `worker-loader` using CJS syntax in `rspack.config.cjs`. This is a temporary solution for migration.

```javascript
module.exports = {
  resolveLoader: {
    alias: {
      'worker-loader': require.resolve('worker-rspack-loader'),
    },
  },
};
```

--------------------------------

### Replacing worker-loader with worker-rspack-loader (ESM)

Source: https://rspack.rs/guide/features/web-workers

Configures Rspack to use `worker-rspack-loader` as a replacement for `worker-loader` using ESM syntax in `rspack.config.mjs`. This is a temporary solution for migration.

```javascript
import { createRequire } from 'module';

const require = createRequire(import.meta.url);

export default {
  resolveLoader: {
    alias: {
      'worker-loader': require.resolve('worker-rspack-loader'),
    },
  },
};
```

--------------------------------

### Configure Rspack for SVGR Integration

Source: https://rspack.rs/guide/tech/react

This Rspack configuration enables SVGR to transform SVG files into React components. It uses the '@svgr/webpack' loader and specifies conditions for its application.

```javascript
export default {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};
```
Tokens:
Raw