webpack的devtool
这里以环境分类为分析方向
1.对开发环境
eval
- 每个模块都使用 eval()
执行,并且都有 //@ sourceURL
。此选项会非常快地构建。主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数。
eval-source-map
- 每个模块使用 eval()
执行,并且 source map 转换为 DataUrl 后添加到 eval()
中。初始化 source map 时比较慢,但是会在重新构建时提供比较快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。
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 文件!
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
webpack的devtool的更多相关文章
- [转] Webpack的devtool和source maps
source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL),而devtool就是用来指定 ...
- webpack中devtool的配置方案[开发模式]---[线上模式]
// 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 ...
- webpack使用devtool :source map插件
链接 : https://www.cnblogs.com/chris-oil/p/8856020.html
- webpack-react之webpack篇(http://www.jianshu.com/p/794d573d2c53)
构建一个小项目——FlyBird,学习webpack和react.(本文成文于2017/2/25) 从webpack开始本篇从零开始,详细记录webpack的各个方面.文章中将会放入很多链接以便扩展, ...
- 优化Webpack构建性能的几点建议
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...
- 从0开始搭建vue+webpack脚手架(四)
之前1-3部分是webpack最基本的配置, 接下来会把项目结构和配置文件重新设计,可以扩充更多的功能模块. 一.重构webpack的配置项 1. 新建目录build,存放webpack不同的配置文件 ...
- webpack 创建vue项目过程中遇到的问题和解决方法
目录 1 webpack简介 2 webpack实现多个输入输出多个html 3 webpack 中的module下rules 下的use和loader选项 4 webpack 文件更新,如何使页面 ...
- Webpack 备忘录
Webpack 属于在项目中配置一次就很少改动的那种工具,但这样就导致新项目再配置 Webpack 时会有些生疏,所以将 Webpack 核心概念及常用配置记录如下. 1)核心概念 Webpack 4 ...
- 【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
随机推荐
- 4种xml解析器区别
XML作用:不同应用之间的通信和数据共享 Dom遍历法:对内存消耗大,容易内存溢出 SAX方法:事件驱动模式,缺点 不易操作,很难同时访问多处不同数据,对内存消耗不大,速度快 jdom方法: dom4 ...
- UVA 356 - Square Pegs And Round Holes
题目:在一个2n*2n的网格中间画一个直径为2n-1的圆,问圆内部的格子以及和圆相交的格子个数. 思路:只要考虑1 / 4圆的点就行,用点到原点距离与半径比较,当格子左下方和右上方都在格子里时,格子在 ...
- vue项目使用js-xlsx进行excel表格的导入和导出方法的简单原型封装
前提:已经安装好 file-saver xlsx和 script-loader,如未安装,请查看 https://www.cnblogs.com/luyuefeng/p/8031597.html 新建 ...
- java-day25
. 标签学习: 1. 文件标签:构成html最基本的标签 * html:html文档的根标签 * head:头标签.用于指定html文档 ...
- python获取全部股票每日基本面指标,用于选股分析、报表展示等
接口:daily_basic 更新时间:交易日每日15点-17点之间 描述:获取全部股票每日重要的基本面指标,可用于选股分析.报表展示等. 积分:用户需要至少300积分才可以调取,具体请参阅本文最下方 ...
- 搭建WordPress博客程序库
搭建WordPress博客程序库 wordpress简介 wordpress是一套利用PHP语言和Mysql数据库开发的开源免费的Blog(博客,网站)程序,用户可以在支持PHP环境和Mysql数据库 ...
- Mysql流程解析
Mysql流程解析 流程图 流程图解析 客户端发送一条sql语句. 1.此时,mysql会检查sql语句,查看是否命中缓存,如果命中缓存,直接返回结果,不继续执行.没有命中则进入解析器. 2.解析器会 ...
- Redis探索之路(三):Redis的五种数据类型String和Hash
一:String 存储二进制数据,可以图片,序列化对象 GET,SET SETNX(not exist) setnx age 33 返回 0,1 SETEX设置有效期 SETEX COLOR 2 ...
- java script两个列表之间移动数据
<select name="b1" id="hao" style="width:100px; height:200px;" size= ...
- 记录下工作中用到的Linux命令
---恢复内容开始--- 常用的Linux命令以下命令在博主的开发中经常使用,因此在此做一记录,以做备忘! 1.查看java进程ps -ef|grep javaps aux|grep java lso ...