> For AI agents: the complete documentation index is available at https://rspack.rs/zh/llms.txt, the full documentation bundle is available at https://rspack.rs/zh/llms-full.txt.

# Svelte

## 如何使用

Rspack 提供两种方案来支持 Svelte：

- **使用 Rsbuild**：Rsbuild 提供对 Svelte 开箱即用的支持，能够快速创建一个 Svelte 项目，详见 [Rsbuild - Svelte](https://rsbuild.rs/zh/guide/framework/svelte)。
- **手动配置 Rspack**：你可以参考当前文档，手动添加 Svelte 相关的配置。

## 配置 svelte-loader

得益于 Rspack 对 [svelte-loader](https://github.com/sveltejs/svelte-loader) 的良好兼容，在 Rspack 里使用 Svelte 是非常简单的。只需要配置好 svelte-loader 即可。 Rspack 提供了一个 Svelte 的[例子](https://github.com/rstackjs/rstack-examples/tree/main/rspack/svelte)可供参考。

```js title="rspack.config.mjs"
import path from 'node:path';
import { defineConfig } from '@rspack/cli';
import { createRequire } from 'node:module';
import { sveltePreprocess } from 'svelte-preprocess';

const require = createRequire(import.meta.url);
const prod = process.env.NODE_ENV === 'production';

export default defineConfig({
  entry: {
    main: './src/main.ts',
  },
  resolve: {
    alias: {
      svelte: path.dirname(require.resolve('svelte/package.json')),
    },
    extensions: ['.mjs', '.js', '.ts', '.svelte'],
    mainFields: ['svelte', 'browser', 'module', 'main'],
  },
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: [
          {
            loader: 'svelte-loader',
            options: {
              compilerOptions: {
                dev: !prod,
              },
              emitCss: prod,
              hotReload: !prod,
              preprocess: sveltePreprocess({ sourceMap: !prod, postcss: true }),
            },
          },
        ],
      },
    ],
  },
});
```