Categories: Webpack 教程

EvalSourceMapDevToolPlugin

本插件可以为 source map 的生成提供更好更细粒度的控制。devtool 中的某些配置会自动使用它。

new webpack.EvalSourceMapDevToolPlugin(options);

选项

支持以下选项:

  • test (string|RegExp|array)​: 默认值为 .js 和 .css,为与给定的模块扩展名相匹配的模块,添加 source map。
  • include (string|RegExp|array)​: 为与给定路径相匹配的模块,添加 source map。
  • exclude (string|RegExp|array)​: 排除一些与给定值相匹配的模块,不会为它们生成映射关系。
  • append (string)​: 将给定的值添加到源代码中,通常是 #sourceMappingURL 注释,[url] 在 source map 文件中将会被替换成 url,值为 false 表示不添加。
  • moduleFilenameTemplate (string)​: 查看 output.devtoolModuleFilenameTemplate。
  • module (boolean)​: 默认值为 true,表示是否为 loaders 添加 source map。
  • columns (boolean)​: 默认值为 true,表示是否使用列映射(column mapping)。
  • protocol (string)​: 默认协议名为 webpack-internal://,允许用户重新定义协议。

示例

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

基本用例

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

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

排除 Vendor(第三方库) Maps

下面的代码将排除 ​vendor.js​ 包中任何模块 source map 的生成:

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

Further Reading

唐伯虎点蚊香

前端小白,想各位学习!

Share
Published by
唐伯虎点蚊香

Recent Posts

聊聊vue3中的defineProps

在Vue 3中,defineP…

4 天 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

1 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

2 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

3 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

4 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

4 周 ago