output.sourceMap#

• Type:

type SourceMap =
  | boolean
  | {
      js?: Rspack.Configuration['devtool'];
      css?: boolean;
    };

• Default:

const defaultSourceMap = {
  js: mode === 'development' ? 'cheap-module-source-map' : false,
  css: false,
};

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

Default Behavior#

By default, the source map generation rules for Rsbuild are as follows:

• In development mode, source maps for JS files are generated for development debugging, while source maps for CSS files are not generated.
• In production mode, no source maps for JS and CSS files are generated to improve build performance.

Boolean value#

If output.sourceMap is true, the source map will be generated according to the mode, equivalent to:

export default {
  output: {
    sourceMap: {
      js: mode === 'development' ? 'cheap-module-source-map' : 'source-map',
      css: true,
    },
  },
};

If output.sourceMap is false, no source map will be generated, equivalent to:

export default {
  output: {
    sourceMap: {
      js: false,
      css: false,
    },
  },
};

JS Source Map#

The source map for JS files is controlled by sourceMap.js and can be configured by passing in all the source map formats supported by Rspack's devtool option. Setting it to false will disable the source map.

For example, if you need to generate high-quality source maps in all environments, you can set it as follows:

export default {
  output: {
    sourceMap: {
      js: 'source-map',
    },
  },
};

You can also set different source map formats based on the environment.

export default {
  output: {
    sourceMap: {
      js:
        process.env.NODE_ENV === 'production'
          ? // Use a high quality source map format for production
            'source-map'
          : // Use a more performant source map format for development
            'cheap-module-source-map',
    },
  },
};

CSS Source Map#

The source map for CSS files is controlled by sourceMap.css. Setting it to true will enable the source map, while setting it to false will disable it.

For example, if you need to generate a source map for CSS files, you can set it as follows:

export default {
  output: {
    sourceMap: {
      css: true,
    },
  },
};

In production builds, it is not recommended to enable both output.injectStyles and output.sourceMap.css, as output.injectStyles will inject the source map into the JS bundles, which will increase the file size and slow down the page loading speed.

You can only enable the CSS file source map in the development mode:

export default {
  output: {
    injectStyles: true,
    sourceMap: {
      css: process.env.NODE_ENV === 'development',
    },
  },
};