SourceMapDevToolPlugin 插件

此插件可以更细粒度地控制 source map 的生成。某些 devtool 配置选项的设置也会自动启用它。

new webpack.SourceMapDevToolPlugin(options);

选项

支持以下选项：

• test（string、RegExp、function (asset) => boolean、[string, RegExp, function (asset) => boolean]）：根据模块扩展名包含 source map（默认 .js、.mjs 和 .css）。

• include（string、RegExp、function (asset) => boolean、[string, RegExp, function (asset) => boolean]）：包含路径与给定值匹配的模块的 source map。

• exclude（string、RegExp、function (asset) => boolean、[string, RegExp, function (asset) => boolean]）：将匹配给定值的模块从 source map 生成中排除。

• filename（string）：定义 SourceMap 的输出文件名（如果未提供值，将内联）。

• append（string、function、false）：将给定值附加到原始资源上。通常是 #sourceMappingURL 注释。[url] 会被替换为 source map 文件的 URL。自 webpack v4.36.0 起，支持路径参数：[chunk]、[filename] 和 [contenthash]。将 append 设为 false 可禁用附加。

  从 5.84.0 版本开始，webpack 允许 append 选项作为一个函数，该函数接受路径数据和 asset info 对象作为参数，并返回一个字符串。

  ts 复制代码

  (pathData: PathData, assetInfo?: AssetInfo) => string;

• moduleFilenameTemplate（string）：参见 output.devtoolModuleFilenameTemplate。

• fallbackModuleFilenameTemplate（string）：参见上述链接。

• ignoreList（string、RegExp、function (source) => boolean、[string, RegExp, function (source) => boolean]）：决定是否在 source map 中忽略与指定值匹配的源文件。

• module = true（boolean）：指示 loaders 是否应生成 source map。

• columns = true（boolean）：指示是否应使用列映射。

• namespace（string）：命名空间前缀，允许在 devtools 中有多个 webpack 根。参见 output.devtoolNamespace。

• noSources = false（boolean）：避免将源文件内容包含在 source map 中。

• publicPath（string）：生成带 public path 前缀的绝对 URL，例如 https://example.com/project/。

• fileContext（string）：使 [file] 参数相对于该目录。

• sourceRoot（string）：为 SourceMap 中的 sourceRoot 属性提供自定义值。

• debugIds（boolean）：如果为 true，将在 source 和 sourcemap 中发出唯一 id，这有助于在不同构建之间识别 sourcemap。有关更多详细信息，请参阅 TC39 sourcemap debug ID proposal。

fileContext 选项在你希望将 source map 存储在更上层目录以避免绝对 [url] 中出现的 ../../ 时非常有用。

提示：将 module 和/或 columns 设置为 false 会产生不太准确的 source map，但也会显著提高编译性能。

提示：如果你想在开发模式下使用此插件的自定义配置，请确保禁用默认配置。即设置 devtool: false。

注意：如果默认的 webpack minimizer 已被覆盖（例如为了自定义 MinimizerPlugin 的选项），请确保为其替代配置设置 sourceMap: true 以启用 SourceMap 支持。

示例

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

基本用例

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

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

排除 Vendor Maps

以下代码将排除 vendor.js 包中任何模块的 source map：

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

外部托管 Source Maps

为 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