#output

Options for build outputs.

#output.assetPrefix output.assetPrefix

Use this option to set the URL prefix for static assets, such as setting it to a CDN URL.

In Rslib, the default value for this option depends on format:

• When format is cjs or esm, the default value is "auto".
• When format is mf or umd, the default value is "/".

When output.assetPrefix is set to "auto", Rslib defaults to setting importMode to "preserve", which preserves the import or require statements for static assets in JavaScript files. Additionally, the static asset references in CSS files remain as relative paths, see Import static assets for more details.

When output.assetPrefix is set to a specific path, the static asset import statements in JavaScript files will no longer be preserved and will be replaced with URLs prefixed by that path. Additionally, the static asset paths in CSS files will be substituted with paths that include this prefix.

#output.charset output.charset

The charset config allows you to specify the character encoding for output files to ensure they are displayed correctly in different environments.

#output.cleanDistPath output.cleanDistPath

• CLI: --clean / --no-clean

Whether to clean up all files under the output directory before the build starts (the output directory defaults to dist).

#output.copy output.copy

Copies the specified file or directory to the dist directory, implemented based on rspack.CopyRspackPlugin.

#output.cssModules output.cssModules

For custom CSS Modules configuration.

#output.dataUriLimit output.dataUriLimit

Set the size threshold to inline static assets such as images and fonts.

When format is set to cjs or esm, Rslib defaults to setting output.dataUriLimit to 0, without inlining any static assets, so that build tools on the application side can handle and optimize them.

#output.distPath output.distPath

• CLI: --dist-path <dir> (e.g. --dist-path output)

Set the directory of the dist files. Rsbuild will output files to the corresponding subdirectory according to the file type.

By default, Rslib sets output.distPath to:

const defaultDistPath = {
  root: 'dist',
  js: './',
  jsAsync: './',
  css: './',
  cssAsync: './',
  svg: 'static/svg',
  font: 'static/font',
  wasm: 'static/wasm',
  image: 'static/image',
  media: 'static/media',
  assets: 'static/assets',
};

#output.emitCss output.emitCss

Whether to emit CSS to the output bundles.

#output.externals output.externals

• CLI: --externals <pkg> (repeatable, e.g. --externals react --externals react-dom)

At build time, prevent some import dependencies from being packed into bundles in your code, and instead fetch them externally at runtime.

In bundle mode, Rslib will automatically add the dependencies listed in the dependencies, optionalDependencies, and peerDependencies fields of package.json to output.externals. See lib.autoExternal for more information.

#output.filenameHash output.filenameHash

Whether to add a hash value to the filename after the production build.

Rslib sets output.filenameHash to false by default.

#output.filename output.filename

Sets the filename of dist files.

By default, Rslib will modify the JavaScript output file extension by setting output.filename.js according to format, see autoExtension for more details.

#output.injectStyles output.injectStyles

Whether to inject styles into DOM.

#output.inlineScripts output.inlineScripts

Whether to inline output scripts files (.js files) into HTML with <script> tags.

#output.inlineStyles output.inlineStyles

Whether to inline output style files (.css files) into HTML with <style> tags.

#output.legalComments output.legalComments

Configure how to handle the legal comment.

#output.manifest output.manifest

Whether to generate a manifest file that contains information of all assets, and the mapping relationship between entry module and assets.

#output.minify output.minify

• CLI: --minify / --no-minify

Configure whether to enable code minification, or to configure minimizer options.

When output.minify is not specified, Rslib will use a sane default value.

• When format is esm or cjs, only dead code elimination and unused code elimination will be performed. The default value is:

export default defineConfig({
  output: {
    minify: {
      js: true,
      css: false,
      jsOptions: {
        minimizerOptions: {
          mangle: false,
          minify: false,
          compress: {
            defaults: false,
            directives: false,
            unused: true,
            dead_code: true,
            toplevel: true,
          },
          format: {
            comments: 'some',
            preserve_annotations: true,
          },
        },
      },
    },
  },
});

• When format is umd, the default value is the same as above, only dead code elimination and unused code elimination will be performed, which is usually used to generate UMD output for development. If you need to generate UMD output for production with the smallest possible bundle size, you can set output.minify to true:

export default defineConfig({
  output: {
    minify: true,
  },
});

• When format is mf, since MF assets are loaded over the network, which means they will not be compressed by the application project. Therefore, they need to be minified in Rslib. The default value is:

export default defineConfig({
  output: {
    minify: {
      js: true,
      css: false,
      jsOptions: {
        minimizerOptions: {
          mangle: false,
          // Enable minification
          minify: true,
          compress: {
            defaults: false,
            directives: false,
            unused: true,
            dead_code: true,
            // Avoid remoteEntry's global variable being tree-shaken
            toplevel: false,
          },
          format: {
            comments: 'some',
            preserve_annotations: true,
          },
        },
      },
    },
  },
});

#output.overrideBrowserslist output.overrideBrowserslist

Specifies the range of target browsers that the project is compatible with.

Rslib will generate output.overrideBrowserslist based on syntax, see ESX_TO_BROWSERSLIST to get the mapping value.

#output.polyfill output.polyfill

Through the output.polyfill option, you can control the injection mode of the polyfills.

#output.sourceMap output.sourceMap

Used to set whether to generate source map files, and which format of source map to generate.

#output.target output.target

• CLI: --target <target> (e.g. --target web)

Setting the build target of Rsbuild.

Rslib sets output.target to node by default.