#Features FAQ

#Style processing

#How to skip the preprocessing of Less / Sass files in bundleless mode?

Bundleless means that each source file is compiled and built separately, which can be understood as the process of code transformation of source files only. To skip the preprocessing of .less/.scss files, you need to:

1. Set source.entry to remove .less/.scss files from the entry.
2. Set output.copy to copy .less/.scss files to the output directory.
3. Set redirect.style.extension to false to disable the redirect behavior for the import path of .less/.scss files.

Below is an example of skipping the .scss file processing. All .scss files in src will be copied to the output directory and retained with consistent relative paths.

export default defineConfig({
  lib: [
    {
      // ...
      source: {
        entry: {
          index: ['./src/**', '!src/**/*.scss'],
        },
      },
      output: {
        copy: [{ from: '**/*.scss', context: path.join(__dirname, 'src') }],
      },
      redirect: {
        style: {
          extension: false,
        },
      },
    },
  ],
});

#Code minification

#How to preserve all comments in the output files?

By default, Rslib uses SWC to remove comments. The corresponding SWC jsc.minify.format configuration is

{
    comments: 'some',
    preserveAnnotations: true,
}

This will only preserve some legal comments and annotations. If you want to preserve all comments, you can refer to the following configuration:

export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          format: {
            comments: 'all', // This will preserve all comments
          },
        },
      },
    },
  },
};

#How to compress the output size while preserving code readability?

Compressing code can reduce the output size and improve loading speed, but the compressed code is less readable and harder to debug. If you want to preserve code readability, you can keep variable names and disable compression to facilitate debugging. Refer to web-infra-dev/rsbuild#966.

export default {
  lib: [
    // ...
  ],
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          // preserve variable name and disable minify for easier debugging
          mangle: false,
          minify: false,
          compress: true,
        },
      },
    },
  },
};

#Declaration files generation

#How to additionally exclude specified dependencies whendts.bundle istrue?

Rslib uses rsbuild-plugin-dts to generate declaration files, which supports configuration via output.externals for excluding certain dependencies from bundled declaration files.

For example, a typical React component library often does not declare @types/react in peerDependencies but only in devDependencies. Following the autoExternal logic for dependency handling, Rslib will attempt to bundle @types/react into the declaration output files during the build. However, in practice, a component library should not bundle @types/react.

In this scenario, you can configure output.externals to exclude @types/react.

export default {
  lib: [
    // ...
  ],
  output: {
    externals: ['@types/react'],
  },
};

#Miscellaneous

#How to preserve module variables such as__webpack_hash__ in the source code when generating outputs?

Rslib based on Rspack will transform module variables like __webpack_hash__, __webpack_nonce__, __webpack_public_path__, etc. to runtime code containing __webpack_require__ by default during build process. If you need to preserve these module variables in the outputs, you can configure source.define as follows:

1. Replace the module variables that need to be preserved in the source code with a unique name, such as __webpack_hash__ with WEBPACK_HASH, __webpack_nonce__ with WEBPACK_NONCE, __webpack_public_path__ with WEBPACK_PUBLIC_PATH, etc.

const isUpdateAvailable = () => lastCompilationHash !== __webpack_hash__; 
const isUpdateAvailable = () => lastCompilationHash !== WEBPACK_HASH; 

2. Add the module variables that need to be preserved in source.define. The key of the passed configuration object is the replaced variable name in the source code, and the value is the module variable that needs to be preserved in the outputs.

export default defineConfig({
  source: {
    define: {
      WEBPACK_HASH: '__webpack_hash__',
      WEBPACK_NONCE: '__webpack_nonce__',
      WEBPACK_PUBLIC_PATH: '__webpack_public_path__',
    },
  },
});