Supported bundlers
Svelte

Usage with Svelte

Contents

Rollup

Take a look: d964432 (opens in a new tab)

Install rollup-plugin-css-only and update rollup.config.js

import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'; // for CSS bundling
import wyw from '@wyw-in-js/rollup';
 
const dev = process.env.NODE_ENV !== 'production';
 
export default {
  ...
  plugins: [
    svelte({
      dev,
      // allow `plugin-css-only` to bundle with CSS generated by wyw
      emitCss: true,
    }),
    wyw({
      sourceMap: dev,
    }),
    css({
      output: '<OUT_FOLDER>/bundle.css',
    }),
  ],
};

IMPORTANT: rollup-plugin-css-only generates incorrect sourcemaps (see thgh/rollup-plugin-css-only#10 (opens in a new tab)). Use an alternative CSS plugin such as rollup-plugin-postcss (opens in a new tab) instead in the same way as above.

Webpack

Take a look: 5ffd69d (opens in a new tab)

Update webpack.config.js with the following:

const prod = process.env.NODE_ENV === 'production';
 
const wywLoader = {
  loader: '@wyw-in-js/webpack-loader',
  options: {
    sourceMap: !prod,
  },
};
 
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: [wywLoader],
      },
      {
        test: /\.svelte$/,
        use: [
          wywLoader,
          {
            loader: 'svelte-loader',
            options: {
              dev: !prod,
              emitCss: true,
              hotReload: true,
            },
          },
        ],
      },
      ...(CSS rules)
    ],
  },
};
RollupVite