output.sourceMap#

• Type:

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

• Default:

const defaultSourceMap = {
  js: isDev ? '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.

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,
    },
  },
};