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

Configures whether to generate source map files and which source map format to generate.

#Default behavior

Rsbuild generates source maps using these rules by default:

• 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, source maps for JS and CSS files are not generated to improve build performance.

#Boolean value

If output.sourceMap is true, source maps are 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 accepts any source map format supported by Rspack's devtool option. Setting it to false will disable the source map.

For example, to generate high-quality source maps in all environments:

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.

To generate a source map for CSS files:

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 development mode:

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