CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rspack--core

Fast Rust-based web bundler with webpack-compatible API

—

Pending
Overview
Eval results
Files

loaders.mddocs/

Loaders

Built-in loaders for transforming modules during the build process, offering high-performance alternatives to traditional webpack loaders.

Capabilities

SWC Loader

High-performance TypeScript and JavaScript transformation using the SWC (Speedy Web Compiler) written in Rust.

/** SWC loader configuration extending core SWC options */
interface SwcLoaderOptions {
  /** JavaScript compilation configuration */
  jsc?: SwcLoaderJscConfig;
  /** Module system configuration */
  module?: SwcLoaderModuleConfig;
  /** Environment-specific transformations */
  env?: SwcLoaderEnvConfig;
  /** Treat input as module */
  isModule?: boolean;
  /** Rspack-specific experimental features */
  rspackExperiments?: {
    /** Import plugin transformations */
    import?: any[];
    /** Collect TypeScript AST information */
    collectTypeScriptInfo?: boolean;
  };
}

/** JavaScript compilation configuration */
interface SwcLoaderJscConfig {
  /** Parser configuration */
  parser?: SwcLoaderParserConfig;
  /** Transform configuration */
  transform?: SwcLoaderTransformConfig;
  /** Target ECMAScript version */
  target?: "es3" | "es5" | "es2015" | "es2016" | "es2017" | "es2018" | "es2019" | "es2020" | "es2021" | "es2022";
  /** Loose mode transformations */
  loose?: boolean;
  /** External helpers */
  externalHelpers?: boolean;
  /** Keep class names */
  keepClassNames?: boolean;
  /** Minify configuration */
  minify?: any;
  /** Experimental features */
  experimental?: any;
}

/** Parser configuration union type */
type SwcLoaderParserConfig = SwcLoaderEsParserConfig | SwcLoaderTsParserConfig;

/** ECMAScript parser configuration */
interface SwcLoaderEsParserConfig {
  syntax: "ecmascript";
  /** Enable JSX parsing */
  jsx?: boolean;
  /** Function bind operator */
  functionBind?: boolean;
  /** Decorators support */
  decorators?: boolean;
  /** Decorators before export */
  decoratorsBeforeExport?: boolean;
  /** Export default from */
  exportDefaultFrom?: boolean;
  /** Import assertions */
  importAssertions?: boolean;
  /** Private in object */
  privateInObject?: boolean;
  /** Allow super outside method */
  allowSuperOutsideMethod?: boolean;
  /** Allow return outside function */
  allowReturnOutsideFunction?: boolean;
}

/** TypeScript parser configuration */
interface SwcLoaderTsParserConfig {
  syntax: "typescript";
  /** TypeScript extensions */
  tsx?: boolean;
  /** Decorators support */
  decorators?: boolean;
  /** Dynamic imports */
  dynamicImport?: boolean;
}

/** Transform configuration */
interface SwcLoaderTransformConfig {
  /** React JSX transform */
  react?: {
    /** JSX pragma */
    pragma?: string;
    /** JSX pragma fragment */
    pragmaFrag?: string;
    /** Throw if namespace is used */
    throwIfNamespace?: boolean;
    /** Development mode */
    development?: boolean;
    /** Use built-ins */
    useBuiltins?: boolean;
    /** Refresh */
    refresh?: boolean;
    /** Runtime */
    runtime?: "automatic" | "classic";
    /** Import source */
    importSource?: string;
  };
  /** Const modules */
  constModules?: any;
  /** Optimizer */
  optimizer?: any;
  /** Legacy decorators */
  legacyDecorator?: boolean;
  /** Decorator metadata */
  decoratorMetadata?: boolean;
}

/** Module system configuration */
interface SwcLoaderModuleConfig {
  /** Module type */
  type?: "commonjs" | "umd" | "amd" | "es6";
  /** Strict mode */
  strict?: boolean;
  /** Strict mode */
  strictMode?: boolean;
  /** Lazy */
  lazy?: boolean;
  /** No interop */
  noInterop?: boolean;
  /** Ignore dynamic */
  ignoreDynamic?: boolean;
}

/** Environment-specific transformation configuration */
interface SwcLoaderEnvConfig {
  /** Target environments */
  targets?: string | string[] | { [key: string]: string };
  /** Core-js version */
  coreJs?: string;
  /** Mode */
  mode?: "usage" | "entry";
  /** Debug */
  debug?: boolean;
  /** Include */
  include?: string[];
  /** Exclude */
  exclude?: string[];
  /** Shipped proposals */
  shippedProposals?: boolean;
  /** For of assume array */
  forceAllTransforms?: boolean;
}

SWC Loader Usage Examples:

// Basic TypeScript configuration
const swcRule = {
  test: /\.tsx?$/,
  use: {
    loader: "builtin:swc-loader",
    options: {
      jsc: {
        parser: {
          syntax: "typescript",
          tsx: true,
          decorators: true
        },
        transform: {
          react: {
            runtime: "automatic"
          }
        },
        target: "es2020"
      }
    }
  },
  exclude: /node_modules/
};

// JavaScript with environment transformations
const jsRule = {
  test: /\.jsx?$/,
  use: {
    loader: "builtin:swc-loader", 
    options: {
      jsc: {
        parser: {
          syntax: "ecmascript",
          jsx: true
        },
        transform: {
          react: {
            runtime: "automatic",
            development: process.env.NODE_ENV === "development"
          }
        }
      },
      env: {
        targets: "> 0.25%, not dead",
        mode: "usage",
        coreJs: "3.30"
      }
    }
  }
};

// TypeScript with experimental features
const experimentalRule = {
  test: /\.ts$/,
  use: {
    loader: "builtin:swc-loader",
    options: {
      jsc: {
        parser: {
          syntax: "typescript",
          decorators: true
        },
        transform: {
          legacyDecorator: true,
          decoratorMetadata: true
        },
        experimental: {
          plugins: [
            ["@swc/plugin-transform-imports", {
              "lodash": {
                "transform": "lodash/${member}",
                "preventFullImport": true
              }
            }]
          ]
        }
      },
      rspackExperiments: {
        collectTypeScriptInfo: true
      }
    }
  }
};

Lightning CSS Loader

High-performance CSS transformation and processing using Lightning CSS written in Rust.

/** Lightning CSS loader configuration */
interface LightningcssLoaderOptions {
  /** Enable minification */
  minify?: boolean;
  /** Browser targets for compatibility */
  targets?: Targets;
  /** CSS features to include */
  include?: Features;
  /** CSS features to exclude */
  exclude?: Features;
  /** Draft CSS features */
  drafts?: Drafts;
  /** Non-standard CSS features */
  nonStandard?: NonStandard;
  /** Pseudo-class transformations */
  pseudoClasses?: PseudoClasses;
  /** Unused symbol removal */
  unusedSymbols?: string[];
  /** Error recovery mode */
  errorRecovery?: boolean;
  /** CSS modules configuration */
  cssModules?: CSSModulesConfig;
}

/** Browser targets specification */
type Targets = string | string[] | BrowserTargets;

/** Specific browser version targets */
interface BrowserTargets {
  /** Android browser */
  android?: number;
  /** Chrome */
  chrome?: number;
  /** Edge */
  edge?: number;
  /** Firefox */
  firefox?: number;
  /** Internet Explorer */
  ie?: number;
  /** iOS Safari */
  ios_saf?: number;
  /** Opera */
  opera?: number;
  /** Safari */
  safari?: number;
  /** Samsung Internet */
  samsung?: number;
}

/** CSS feature flags */
interface Features {
  /** Nesting support */
  nesting?: boolean;
  /** Not pseudo-class */
  not?: boolean;
  /** Dir pseudo-class */
  dir?: boolean;
  /** Lang pseudo-class */
  lang?: boolean;
  /** Is/where pseudo-classes */
  is?: boolean;
  /** Text decoration */
  textDecoration?: boolean;
  /** Media query ranges */
  mediaQueryRanges?: boolean;
  /** Custom media queries */
  customMediaQueries?: boolean;
  /** Clamp function */
  clamp?: boolean;
  /** Color function */
  colorFunction?: boolean;
  /** OKLCh colors */
  oklch?: boolean;
  /** Color mix function */
  colorMix?: boolean;
  /** P3 color space */
  p3?: boolean;
  /** Hex alpha colors */
  hexAlphaColors?: boolean;
  /** Space separated color notation */
  spaceSeparatedColorNotation?: boolean;
  /** Logical properties */
  logicalProperties?: boolean;
  /** Selectors level 4 */
  selectorsL4?: boolean;
}

/** Draft CSS features */
interface Drafts {
  /** Custom selectors */
  customSelectors?: boolean;
}

/** Non-standard CSS features */
interface NonStandard {
  /** Deep combinator */
  deepSelectorCombinator?: boolean;
}

/** Pseudo-class transformation options */
interface PseudoClasses {
  /** Hover media query replacement */
  hover?: "hover" | "none";
  /** Active media query replacement */
  active?: "active" | "none";
  /** Focus media query replacement */
  focus?: "focus" | "none";
  /** Focus visible media query replacement */
  focusVisible?: "focus-visible" | "none";
  /** Focus within media query replacement */
  focusWithin?: "focus-within" | "none";
}

/** CSS Modules configuration */
interface CSSModulesConfig {
  /** Pattern for generated class names */
  pattern?: string;
  /** Dash case class names */
  dashCase?: boolean;
}

Lightning CSS Loader Usage Examples:

// Basic CSS processing
const cssRule = {
  test: /\.css$/,
  use: [
    "builtin:lightningcss-loader"
  ]
};

// CSS with minification and targets
const productionCssRule = {
  test: /\.css$/,
  use: [
    {
      loader: "builtin:lightningcss-loader",
      options: {
        minify: true,
        targets: "> 0.25%, not dead",
        errorRecovery: true
      }
    }
  ]
};

// Advanced CSS features
const modernCssRule = {
  test: /\.css$/,
  use: [
    {
      loader: "builtin:lightningcss-loader",
      options: {
        targets: {
          chrome: 90,
          firefox: 88,
          safari: 14
        },
        include: {
          nesting: true,
          customMediaQueries: true,
          colorFunction: true,
          oklch: true,
          logicalProperties: true
        },
        drafts: {
          customSelectors: true
        },
        pseudoClasses: {
          hover: "hover",
          focusVisible: "focus-visible"
        }
      }
    }
  ]
};

// CSS Modules
const cssModulesRule = {
  test: /\.module\.css$/,
  use: [
    {
      loader: "builtin:lightningcss-loader",
      options: {
        cssModules: {
          pattern: "[name]_[local]_[hash]",
          dashCase: true
        }
      }
    }
  ]
};

// Browserslist integration
const browserslistRule = {
  test: /\.css$/,
  use: [
    {
      loader: "builtin:lightningcss-loader",
      options: {
        targets: "defaults", // Uses browserslist config
        minify: process.env.NODE_ENV === "production"
      }
    }
  ]
};

Loader Rule Configuration

Configuration patterns for using loaders within module rules.

/** Module rule with loader configuration */
interface LoaderRule {
  /** File pattern to match */
  test: RegExp;
  /** Files to include */
  include?: string | RegExp | (string | RegExp)[];
  /** Files to exclude */
  exclude?: string | RegExp | (string | RegExp)[];
  /** Loader to use */
  use: string | LoaderConfig | (string | LoaderConfig)[];
  /** Module type override */
  type?: string;
  /** Parser options */
  parser?: any;
  /** Generator options */
  generator?: any;
}

/** Individual loader configuration */
interface LoaderConfig {
  /** Loader name */
  loader: string;
  /** Loader options */
  options?: any;
}

Complete Loader Configuration Examples:

import type { Configuration } from "@rspack/core";

const config: Configuration = {
  module: {
    rules: [
      // TypeScript/JavaScript with SWC
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "typescript",
                tsx: true
              },
              transform: {
                react: {
                  runtime: "automatic"
                }
              },
              target: "es2020"
            },
            env: {
              targets: "defaults"
            }
          }
        }
      },
      
      // CSS with Lightning CSS
      {
        test: /\.css$/,
        use: [
          "style-loader", // or CSS extract plugin
          {
            loader: "builtin:lightningcss-loader", 
            options: {
              minify: true,
              targets: "> 0.25%"
            }
          }
        ]
      },
      
      // Assets
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        type: "asset/resource"
      },
      
      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: "asset/resource"
      }
    ]
  }
};

// Environment-specific configurations
const developmentRules = [
  {
    test: /\.[jt]sx?$/,
    exclude: /node_modules/,
    use: {
      loader: "builtin:swc-loader",
      options: {
        jsc: {
          parser: { syntax: "typescript", tsx: true },
          transform: {
            react: {
              runtime: "automatic",
              development: true,
              refresh: true // React Fast Refresh
            }
          }
        }
      }
    }
  }
];

const productionRules = [
  {
    test: /\.[jt]sx?$/,
    exclude: /node_modules/,
    use: {
      loader: "builtin:swc-loader",
      options: {
        jsc: {
          parser: { syntax: "typescript", tsx: true },
          transform: {
            react: {
              runtime: "automatic"
            }
          },
          minify: {
            compress: true,
            mangle: true
          }
        }
      }
    }
  }
];

Performance Considerations

Built-in loaders offer significant performance improvements over JavaScript-based alternatives:

  • SWC Loader: 10-20x faster than Babel for TypeScript/JavaScript transformation
  • Lightning CSS Loader: 100x faster than PostCSS for CSS processing
  • Native Integration: Direct integration with Rspack's Rust core reduces overhead
  • Parallel Processing: Multi-threaded processing for large codebases
  • Incremental Compilation: Smart caching and change detection
// Performance optimization example
const performantConfig = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            // Minimal transformations for maximum speed
            jsc: {
              target: "es2020", // Modern target reduces transforms
              parser: {
                syntax: "typescript",
                tsx: true
              }
            },
            // Skip environment transforms in development
            ...(process.env.NODE_ENV === "production" && {
              env: {
                targets: "defaults"
              }
            })
          }
        }
      }
    ]
  }
};

Install with Tessl CLI

npx tessl i tessl/npm-rspack--core

docs

configuration.md

core-bundling.md

hmr.md

index.md

loaders.md

module-federation.md

plugins.md

tile.json