Features FAQ#

How to import UI Component library on demand?#

If you need to configure the on-demand import of the component library, you can configure it through source.transformImport, which is equivalent to babel-plugin-import.

export default {
  source: {
    transformImport: [
      {
        libraryName: 'my-components',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  },
};

How to run ESLint during compilation?#

For the sake of compilation performance, Rsbuild will not perform ESLint verification during the compilation process by default. If you require this feature, you can use Rsbuild's ESLint plugin.

How to configure CDN path for static assets?#

If you need to upload static assets such as JS and CSS to CDN for use, you can set the URL prefix of static assets through the output.assetPrefix configuration.

export default {
  output: {
    assetPrefix: 'https://cdn.example.com/assets/',
  },
};

How to remove console after production build?#

For the production build, we can remove the console from the code, so as to avoid the log of the development environment being output to the production.

Rsbuild provides a configuration option to remove console by default, please see performance.removeConsole.

How to view the final generated Rspack configuration?#

By using the Rsbuild debug mode, you can view the Rspack configuration generated by Rsbuild.

You can enable the debug mode of Rsbuild by adding the DEBUG=rsbuild environment variable when performing the build. In this mode, the internally generated Rspack configuration will be outputted to the "dist" directory.

➜ DEBUG=rsbuild pnpm dev

debug   create context [1842.90 ms]
debug   add default plugins [1874.45 ms]
debug   add default plugins done [1938.57 ms]
...

Inspect config succeed, open following files to view the content:

  - Rsbuild Config: /root/my-project/dist/rsbuild.config.mjs
  - Rspack Config (web): /root/my-project/dist/rspack.config.web.mjs

How to ignore specific warnings?#

By default, Rsbuild will print all error and warning logs generated by the build process.

If a large number of warning logs are generated due to the three-party package, it cannot be processed temporarily, and you want to ignore it. Specific warning logs can be ignored through the ignoreWarnings configuration provided by Rspack.

export default {
  tools: {
    bundlerChain: (chain) => {
      chain.ignoreWarnings([/Using \/ for division outside of calc()/]);
    },
  },
};

For details, please refer to: ignoreWarnings.