Loader#

In bundling terminology, a loader is like a plugin but tasked with transforming file contents. You can use loaders to transform arbitrary input files into file types that are natively supported by Rspack.

Example#

Using Less#

CSS is a first-class citizen of Rspack, so processing of CSS files is natively supported. For Less files, you need to use an external less-loader to transform the contents of the file accordingly.

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'less-loader',
          },
        ],
        type: 'css',
      },
    ],
  },
};

less-loader can transform Less files to Rspack-supported CSS module types, so you can set the type to 'css' to instruct Rspack to use the CSS handling method that is natively supported for post-processing.

Combining multiple Loaders#

You can chain multiple loaders for a particular Rule match, with the loaders executed in right-to-left order.

For example, you can use less-loader to do the transformation between Less to CSS types and postcss-loader for the transformed source code to perform a secondary transformation, which will then get passed to Rspack's CSS post-processor for further processing.

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: 'postcss-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
        type: 'css',
      },
    ],
  },
};

Passing configuration items#

You can use Rule.use to pass the relevant configuration to the loader, for example:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                // ...
              },
            },
          },
        ],
        type: 'css',
      },
    ],
  },
};

Using a custom loader#

You can use a custom loader with Rspack. In the example below, we'll use the loader API to write a simple banner-loader.

The purpose of the banner-loader is to prepend a banner comment at the header of each module, such as a license notice:

/**
 * MIT Licensed
 * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
 * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
 */

Create a new banner-loader.js file under the root of the project with the following content:

const BANNER = `/**
 * MIT Licensed
 * Copyright (c) 2022-present ByteDance, Inc. and its affiliates.
 * https://github.com/web-infra-dev/rspack/blob/main/LICENSE
 */`;

module.exports = function (content) {
  return `${BANNER}\n${content}`;
};

The first input to this loader is the content of the file, allowing us to process the file content and return the transformed result. The script file must be imported using CommonJS require().

For example, to add a banner to all *.js files, the configuration might look like this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: require.resolve('./banner-loader.js'),
      },
    ],
  },
};

For details, you can refer to loader-api

Using Built-in Loader#

Built-in Loaders offer superior performance compared to JS Loaders, without sacrificing the composability of JS Loaders. The following are some built-in loaders.

• builtin:swc-loader