SourceMapDevToolPlugin#

此插件可实现更细粒度的源映射生成控制。它还由 devtool 配置选项的某些设置自动启用。

new rspack.SourceMapDevToolPlugin(options);

选项#

test#

• 类型: string RegExp [string, RegExp]

根据模块的扩展名包含源映射（默认为 .js、.mjs 和 .css）。

include#

• 类型: string RegExp [string, RegExp]

包含与给定值匹配的模块路径的源映射。

exclude#

• 类型: string RegExp [string, RegExp]

从源映射生成中排除与给定值匹配的模块。

filename#

• 类型: string

定义源映射的输出文件名（如果未提供值，将内联）。

append#

• 类型: string function

将给定值附加到原始资产。通常是 #sourceMappingURL 注释。[url] 将替换为源映射文件的 URL。支持路径参数：[chunk]、[filename] 和 [contenthash]。将 append 设置为 false 将禁用附加。

moduleFilenameTemplate#

• 类型: string

见 output.devtoolModuleFilenameTemplate.

fallbackModuleFilenameTemplate#

• 类型: string

见上文链接。

namespace#

• 类型: string

见 output.devtoolNamespace.

module#

• 类型: boolean
• 默认: true

指示加载器是否应生成源映射。

columns#

• 类型: boolean
• 默认: true

指示是否应使用列映射。

noSources#

• 类型: boolean
• 默认: false

阻止源文件内容包含在源映射中。

publicPath#

• 类型: string

使用公共路径前缀发出绝对 URL，例如 https://example.com/project/。

fileContext#

• 类型: string

使 [file] 参数相对于此目录。

当您想将源映射存储在更高级别的目录中以避免 ../../ 出现在绝对 [url] 中时，fileContext 选项很有用。

sourceRoot#

• 类型: string

为源映射中的 sourceRoot 属性提供自定义值。

示例#

以下示例演示了该插件的一些常见用例。

基本用例#

您可以使用以下代码替换配置选项 devtool: inline-source-map，以使用等效的自定义插件配置

module.exports = {
  // ...
  devtool: false,
  plugins: [new rspack.SourceMapDevToolPlugin({})],
};

排除供应商映射#

以下代码将排除 vendor.js 包中任何模块的源映射

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

在外部托管源映射#

为源映射设置 URL。适用于在需要授权的主机上托管它们。

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

以及在源映射存储在更高级别的目录中的情况下

使用以下配置

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

将生成以下 URL