close
ガイド
設定
プラグイン
API
ブログ
概要
貢献
ガイド
設定
プラグイン
API
ブログ
概要
貢献

Svelte

使い方

RspackはSvelteをサポートするために2つのソリューションを提供します。

  • Rsbuildの使用：RsbuildはSvelteをすぐに利用できるようにサポートしており、Svelteプロジェクトを迅速に作成できます。詳細は「Rsbuild - Svelte」を参照してください。
  • Rspackを手動で構成：現在のドキュメントを参照して、Svelteの設定を手動で追加できます。

svelte-loaderの設定

svelte-loaderとのRspackの良好な互換性のおかげで、RspackでSvelteを使用することは非常に簡単です。必要なのはsvelte-loaderを設定することだけです。Rspackは、参考としてSvelteの例を提供しています。

rspack.config.js
const path = require('path');
/** @type {import('@rspack/cli').Configuration} */
const config = {
  context: __dirname,
  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 }),
            },
          },
        ],
      },
    ],
  },
};
module.exports = config;