SourceMapDevToolPlugin

2023-05-22 10:45 更新

本插件实现了对 source map 生成内容进行更细粒度的控制。它也可以根据 devtool 配置选项的某些设置来自动启用。

new webpack.SourceMapDevToolPlugin(options);

配置项

支持以下配置项:

  • test(string RegExp [string, RegExp])​:包含基于扩展名的模块的 source map(默认是 .js, .mjs 和 .css)。
  • include(string RegExp [string, RegExp])​:使路径与该值匹配的模块生成 source map。
  • exclude(string RegExp [string, RegExp])​:使匹配该值的模块不生成 source map。
  • filename(string)​:定义生成的 SourceMap 的名称(不设置将默认置为 inlined)。
  • append(string)​:在原始资源后追加给定值。通常是 #sourceMappingURL 注释。[url] 被替换成 source map 文件的 URL。webpack v4.36.0 之后支持 path 参数:[chunk]、[filename] 和 [contenthash]。设置 append 为 false 会禁止追加。
  • moduleFilenameTemplate(string)​:查看 output.devtoolModuleFilenameTemplate。
  • fallbackModuleFilenameTemplate(string)​:查看上面的链接。
  • namespace(string)​:查看 output.devtoolNamespace。
  • module = true(boolean)​:表示 loader 是否生成 source map。
  • columns = true(boolean)​:表示是否应该使用 column mapping。
  • noSources = false(boolean)​:防止源文件的内容被包含在 source map 中。
  • publicPath (string)​:生成带 public path 前缀的绝对 URL,例如:https://example.com/project/。
  • fileContext (string)​:使得 [file] 参数作为本目录的相对路径。
  • sourceRoot(string)​:给 SourceMap 中的 sourceRoot 属性提供一个自定义值。

fileContext 配置在你想要将 source map 存储到上层目录,以避免 ../../ 出现在绝对路径 [url] 里面时是有用的。

示例

下面的示例展示了本插件的一些常见用例。

基本使用

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

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

排除 Vendor Maps

以下代码会排除 vendor.js bundle 内模块的 source map。

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

在宿主环境外部化 source map

设置 source map 的 URL。在宿主环境需要授权的情况下很有用。

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

还有一种场景,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

Further Reading


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号