EvalSourceMapDevToolPlugin 插件

此插件允许对 source map 的生成进行更细粒度的控制。它也会通过 devtool 配置选项的某些设置自动启用。

new webpack.EvalSourceMapDevToolPlugin(options);

选项

支持以下选项：

• test（string RegExp function (asset) => boolean [string, RegExp, function (asset) => boolean]）：根据模块的扩展名包含其 source map（默认为 .js 和 .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 生成之外。

• append（string|function）：将给定值追加到原始资源。通常是 #sourceMappingURL 注释。[url] 会被替换为指向 source map 文件的 URL。

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

  ts 复制代码

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

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

• module（boolean）：指示 loader 是否应生成 source map（默认为 true）。

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

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

• protocol（string）：允许用户覆盖默认协议（webpack-internal://）。

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

• noSources = false（boolean）：阻止源文件内容被包含在 source map 中。

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

• debugIds（boolean）：如果为 true，将在源文件和 source map 中发出唯一 id，这有助于在不同构建之间轻松识别 source map。更多详情请参阅 TC39 sourcemap debug ID 提案。

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

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

示例

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

基本用例

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

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

排除 Vendor 的 Source Map

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

new webpack.EvalSourceMapDevToolPlugin({
  exclude: ["vendor.js"],
});