close
Guide
Config
Plugin
API
Blog
Resources
Version

Svelte

How to use

Rspack provides two solutions to support Svelte:

  • Use Rsbuild: Rsbuild provides out-of-the-box support for Svelte, allowing you to quickly create a Svelte project. See "Rsbuild - Svelte" for details.
  • Manually configure Rspack: You can refer to the current document to manually add configurations for Svelte.

Configure svelte-loader

Thanks to the good compatibility of Rspack with the svelte-loader, it is very easy to use Svelte in Rspack. All you need is to configure svelte-loader. Rspack provides Svelte example for reference.

rspack.config.mjs
import path from 'node:path'; import { defineConfig } from '@rspack/cli'; import { createRequire } from 'node:module';  const require = createRequire(import.meta.url);  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 }),  },  },  ],  },  ],  }, });