SourceMapDevToolPlugin

此插件支持更精细地控制源映射生成。它还可以通过 devtool 配置选项的某些设置自动启用。

new webpack.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。自 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)：指示加载器是否应生成源映射。
columns = true (boolean)：指示是否应使用列映射。
noSources = false (boolean)：防止源文件内容包含在源映射中。
publicPath (string)：以公共路径前缀发出绝对 URL，例如 https://example.com/project/。
fileContext (string)：使 [file] 参数相对于此目录。
sourceRoot（string）：为 SourceMap 中的 sourceRoot 属性提供自定义值。

当你想将源映射存储在上层目录中以避免在绝对 [url] 中出现 ../../ 时，fileContext 选项非常有用。

示例

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

基本用例

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

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

排除供应商映射

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

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

外部托管源映射

设置源映射的 URL。对于在需要授权的主机上托管它们非常有用。

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

对于源映射存储在上层目录中的情况

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