Rspack plugins

This package contains several plugins for Rspack that aims to make config simple, short and concise.

You can perceive this as an attempt to make Rspack similar to Vite in terms of functionality out of the box, while keeping maximum flexibility and performance.

Brief overview

All Rspack specific utils available from /rspack pathname.

You can just import plugins to your Rspack configuration file (.ts, .js, CJS or ESM no matter) and use it:

import * as utils from '@krutoo/utils/rspack';

export default {
  entry: './src/index.ts',
  plugins: [
    utils.pluginTypeScript(),
    utils.pluginCSS(),
    utils.pluginHTML(),
    utils.pluginReactSVG(),
    utils.pluginStaticAssets(),
    utils.pluginPublicFiles(),
    // ...and more
  ],
};

pluginTypeScript

Typescript support.

Features:

• Builtin SWC loader used under the hood so you don't need to add rule for files
• By default root tsconfig.json will be used for define path aliases so you don't need to add resolve.alias.tsConfig option to config
• By default js, jsx, ts, tsx, mts, cts files handled

import { pluginTypeScript } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginTypeScript(),
  ],
};

pluginCSS

CSS and css-modules support.

import { pluginCSS } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginCSS(),
  ],
};

pluginHTML

HTML file will be added to bundle. By default modern options is applied to builtin HTML plugin.

import { pluginHTML } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginHTML(),
  ],
};

pluginReactSVG

Allows to import SVG files as React-components.

@svgr/webpack must be installed in your project.

@svgr/webpack is a part of Webpack ecosystem but don't worry - it is compatible with Rspack

import { pluginReactSVG } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginReactSVG(),
  ],
};

pluginPublicFiles

Folder "public" in project root will be copied to bundle as is.

import { pluginPublicFiles } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginPublicFiles(),
  ],
};

pluginRawImport

Ability to import source code of file by:

• adding ?raw query to import specifier
• or by adding import attribute like with { type: 'text' }

import { pluginRawImport } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginRawImport(),
  ],
};

pluginStaticAssets

Common file types like images, sounds and fonts will be imported as urls to resource so you don't need to add rules for it.

import { pluginStaticAssets } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginStaticAssets(),
  ],
};

pluginImportMetaEnv

Same as builtin EnvironmentPlugin but allows to use variables as import.meta.env.APP_NAME.

import { pluginImportMetaEnv } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginImportMetaEnv(['NODE_ENV', 'DEBUG']),
  ],
};