import WebpackLicense from '@components/WebpackLicense';

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.

:::tip Setting module and/or columns to false will yield less accurate source maps but will also improve compilation performance significantly. :::

:::tip If you want to use a custom configuration for this plugin in development mode, make sure to disable the default one. I.e. set devtool: false. :::

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