#SourceMapDevToolPlugin

This plugin enables more fine grained control of source map generation. It is also enabled automatically by certain settings of the devtool configuration option.

new rspack.SourceMapDevToolPlugin(options);

#Options

#test

• Type: string RegExp [string, RegExp]

Include source maps for modules based on their extension (defaults to .js, .mjs, and .css).

#include

• Type: string RegExp [string, RegExp]

Include source maps for module paths that match the given value.

#exclude

• Type: string RegExp [string, RegExp]

Exclude modules that match the given value from source map generation.

#filename

• Type: string

Defines the output filename of the SourceMap (will be inlined if no value is provided).

#append

• Type: string function

Appends the given value to the original asset. Usually the #sourceMappingURL comment. [url] is replaced with a URL to the source map file. Path parameters are supported: [chunk], [filename] and [contenthash]. Setting append to false disables the appending.

#moduleFilenameTemplate

• Type: string

See output.devtoolModuleFilenameTemplate.

#fallbackModuleFilenameTemplate

• Type: string

See link above.

#namespace

• Type: string

See output.devtoolNamespace.

#module

• Type: boolean
• Default: true

Indicates whether loaders should generate source maps.

#columns

• Type: boolean
• Default: true

Indicates whether column mappings should be used.

#noSources

• Type: boolean
• Default: false

Prevents the source file content from being included in the source map.

#publicPath

• Type: string

Emits absolute URLs with public path prefix, e.g. https://example.com/project/.

#fileContext

• Type: string

Makes the [file] argument relative to this directory.

The fileContext option is useful when you want to store source maps in an upper level directory to avoid ../../ appearing in the absolute [url].

#sourceRoot

• Type: string

Provide a custom value for the sourceRoot property in the SourceMap.

#Examples

The following examples demonstrate some common use cases for this plugin.

#Basic use case

You can use the following code to replace the configuration option devtool: inline-source-map with an equivalent custom plugin configuration:

import { rspack } from '@rspack/core';

export default {
  devtool: false,
  plugins: [new rspack.SourceMapDevToolPlugin({})],
};

#Exclude vendor maps

The following code would exclude source maps for any modules in the vendor.js bundle:

new rspack.SourceMapDevToolPlugin({
  filename: '[file].map[query]',
  exclude: ['vendor.js'],
});

#Host source maps externally

Set a URL for source maps. Useful for hosting them on a host that requires authorization.

new rspack.SourceMapDevToolPlugin({
  append: '\n//# sourceMappingURL=https://example.com/sourcemap/[url]',
  filename: '[file].map[query]',
});

And for cases when source maps are stored in the upper level directory:

project
|- dist
  |- public
    |- bundle-[hash].js
  |- sourcemaps
    |- bundle-[hash].js.map

With the following config:

new rspack.SourceMapDevToolPlugin({
  filename: 'sourcemaps/[file].map',
  publicPath: 'https://example.com/project/',
  fileContext: 'public',
});

Will produce the following URL:

https://example.com/project/sourcemaps/bundle-[hash].js.map

This page is adapted from webpack documentation under the CC BY 4.0, with modifications.