close
  • English
      • CC 4.0 License

      The content of this section is derived from the content of the following links and is subject to the CC BY 4.0 license.

      The following contents can be assumed to be the result of modifications and deletions based on the original contents if not specifically stated.

      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:

      rspack.config.mjs
      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