webpack的devtool[通俗易懂]

webpack的devtool[通俗易懂]这里以环境分类为分析方向1.对开发环境eval-每个模块都使用eval()执行,并且都有//@sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从loader中获取sourcemap),所以不能正确的显示行数。eval-source-map-每个模块使用eval()执行,并且sourcem…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

这里以环境分类为分析方向

1.对开发环境

eval – 每个模块都使用 eval() 执行,并且都有 //@ sourceURL。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。

webpack的devtool[通俗易懂]

 

eval-source-map – 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

webpack的devtool[通俗易懂]

 

cheap-eval-source-map – 类似 eval-source-map,每个模块使用 eval() 执行。这是 “cheap(低开销)” 的 source map,因为它没有生成列映射(column mapping),只是映射行数。它会忽略源自 loader 的 source map,并且仅显示转译后的代码,就像 eval devtool。

cheap-module-eval-source-map – 类似 cheap-eval-source-map,并且,在这种情况下,源自 loader 的 source map 会得到更好的处理结果。然而,loader source map 会被简化为每行一个映射(mapping)。

 

2.对生产环境

(none)(省略 devtool 选项) – 不生成 source map。这是一个不错的选择。

 

source-map – 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释,以便开发工具知道在哪里可以找到它。并在打包文件的末尾添加//# souceURL,注释会告诉JS引擎原始文件位置。

你应该将你的服务器配置为,不允许普通用户访问 source map 文件!

webpack的devtool[通俗易懂]

 

hidden-source-map – 与 source-map 相同,但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息,但不想为浏览器开发工具暴露你的 source map,这个选项会很有用。

nosources-source-map – 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪,而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器

 

 

参考:https://www.webpackjs.com/configuration/devtool/

   https://www.cnblogs.com/hhhyaaon/p/5657469.html

   https://blog.csdn.net/liwusen/article/details/79414508

转载于:https://www.cnblogs.com/myzy/p/9908920.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185588.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 415错误的一种解决方法

    415错误的一种解决方法出现415错误的解决方法:1.前端看ajax请求的contentType是否与后端一致2.看发送的数据格式是否正确。下例为后端所需数据为json格式,contentType为application/json的ajax请求。functiongetAddDirResponse(data){$.ajax({url:’/algor/api/datadirs’,

  • 开挂网站免费版_开心ol辅助脚本

    开挂网站免费版_开心ol辅助脚本开讲。做一个Web游戏外挂需要的准备知识:1)需要有耐心2)熟悉HTML,JavaScript,特别是FORM3)熟悉HTTP协议,特别是Cookie,URL的编码方式和POST,GET内容格式4)熟悉游戏本身,能抽象出最优的赚钱/升级的数学模型5)掌握一门语言,白菜萝卜都可以,我比较喜欢用Python和C#6)需要一些抓包的工具,比如Fiddle…

  • XXX公司的入职试题(时间:两小时)

    XXX公司的入职试题(时间:两小时)

  • 新鲜出炉: IE8 beta1 的下载地址以及官方论坛

    新鲜出炉: IE8 beta1 的下载地址以及官方论坛

  • byte数组拼接[通俗易懂]

    byte数组拼接[通俗易懂]/** *拼接byte数组 *@paramdata1 *@paramdata2 *@return拼接后数组 */ publicstaticbyte[]addBytes(byte[]data1,byte[]data2){ byte[]data3=newbyte[data1.length+data2.length]; System.arraycopy(data1,0,data3,0,data1.length)..

  • python 0o_python中0o1010是多少

    python 0o_python中0o1010是多少python0o1010是多少?它以0开头,满足八进制的要求,是个八进制的数,下面来了解一下整数的四种表现形式:对于整数:有四种表现形式二进制:0,1满2进1八进制:0-7满8进1,用0开头表示十进制:0-9满10进1十六进制:0-9,A-F满16进1,用0x表示位(bit):存储信息的最小单位,表示一个二进制数字。字节(Byte):一个字节由8位二进制数字组成(1Byte=8bit)…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号