SourceMapDevToolPlugin

此插件可以更精细地控制源映射生成。它也会在 devtool 配置选项的某些设置下自动启用。

new webpack.SourceMapDevToolPlugin(options);

选项

支持以下选项

test (string RegExp [string, RegExp]): 根据模块扩展名（默认为 .js、.mjs 和 .css）包含 Source Map。
include (string RegExp [string, RegExp]): 包含与给定值匹配的模块路径的 Source Map。
exclude (string RegExp [string, RegExp]): 从 Source Map 生成中排除与给定值匹配的模块。
filename (string): 定义 Source Map 的输出文件名（如果未提供值，则将内联）。
append (string function false): 将给定值附加到原始资产。通常是 #sourceMappingURL 注释。[url] 会被替换为 Source Map 文件的 URL。自 webpack v4.36.0 起，支持路径参数：[chunk]、[filename] 和 [contenthash]。将 append 设置为 false 可禁用附加。

从版本 5.84.0 开始，webpack 允许 append 选项是一个函数，该函数接受路径数据和资产信息对象作为参数，并返回一个字符串。
```
(pathData: PathData, assetInfo?: AssetInfo) => string;
```
moduleFilenameTemplate (string)：请参阅 output.devtoolModuleFilenameTemplate。
fallbackModuleFilenameTemplate (string): 请参见上方链接。
namespace (string): 请参见 output.devtoolNamespace。
module = true (boolean): 指示加载器是否应生成 Source Map。
columns = true (boolean): 指示是否应使用列映射。
noSources = false (boolean): 防止源文件内容包含在 Source Map 中。
publicPath (string): 使用公共路径前缀（例如 https://example.com/project/）发出绝对 URL。
fileContext (string): 使 [file] 参数相对于此目录。
sourceRoot (string): 为 Source Map 中的 sourceRoot 属性提供自定义值。
debugIds (boolean): 如果为 true，将在源文件和 Source Map 中发出唯一的 ID，这有助于简化跨不同构建识别 Source Map。有关更多详细信息，请参阅 TC39 Source Map 调试 ID 提案。

fileContext 选项在您希望将 Source Map 存储在上级目录以避免绝对 [url] 中出现 ../../ 时很有用。

示例

以下示例展示了此插件的一些常见用例。

基本用例

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

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

排除供应商映射

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

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

外部托管 Source Map

为 Source Map 设置 URL。这对于将其托管在需要授权的主机上很有用。

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

以及 Source Map 存储在上级目录中的情况

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

使用以下配置

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

将生成以下 URL

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