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: 'xxx-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 need this function, you can manually install and register the eslint-webpack-plugin in the community -contrib/eslint-webpack-plugin).

The sample code to register the plugin is as follows:

import ESLintPlugin from 'eslint-webpack-plugin';

export default {
  tools: {
    bundlerChain(chain) {
      chain.plugin('eslint-plugin').use(ESLintPlugin, [
        {
          extensions: ['.js', '.ts', '.jsx', 'tsx', '.mjs', '.cjs'],
        },
      ]);
    },
  },
};

For more detailed usage, please refer to the eslint-webpack-plugin documentation.

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?#

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

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.