webpack和source map
当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。
如果打包后代码有一处错误,特别是使用的vue、react这些前端框架。打包后很难定位问题。错误只能追踪到发生在打包后文件的哪个位置。打包后的文件不仅不方便阅读。还很难理解。
使用source map,就可以将编译后的代码映射回原始源代码。方便查看错误发生在原模块的哪个地方。
一般来说开发环境开启source map,线上环境关闭source map。
在webpack.config.js
文件中配置source map
\\ webpack.config.js
module.exports = {
devtool: 'eval'
}
devtool的常用配置
- 生产模式一般使用
source-map
, 会生成单独的 .map文件 - 开发模式一般使用
cheap-module-source-map
webpack使用source-map: 参考https://webpack.docschina.org/guides/development/#using-source-maps
webpack devtool的配置: 参考https://webpack.docschina.org/configuration/devtool/
webpack和source map的更多相关文章
- webpack之source map
先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElemen ...
- 第五十八篇:webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- [Javascript] Webpack Loaders, Source Maps, and ES6
Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...
- 【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
- 让 webpack 加载 Source Map
在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...
- webpack学习_使用source map
追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...
- Source Map调试压缩后代码
在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...
- [AngualrJS + Webpack] Production Source Maps
When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a ...
- Source Map入门教程
部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...
- Javascript 如何生成Less和Js的Source map
为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...
随机推荐
- 1.初识 Django
设计模式 定义 # mysite/news/models.py from django.db import models class Reporter(models.Model): full_name ...
- css 显示n行文字的方法 超出的部分用省略号代替
// 超出的部分用省略号代替 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; // 显示文字的行数 over ...
- ASP.NET Core - 依赖注入(一)
1. Ioc 与 DI Ioc 和DI 这两个词大家都应该比较熟悉,这两者已经在各种开发语言各种框架中普遍使用,成为框架中的一种基本设施了. Ioc 是控制反转, Inversion of Contr ...
- GoLang 的协程调度和 GMP 模型
GoLang 的协程调度和 GMP 模型 GoLang 是怎么启动的 关于 GoLang 的汇编语言,请查阅 参考文献[1] 和 参考文献[2] 编写一个简单的 GoLang 程序 main.go, ...
- 原创ui自动化组件库-seliky
seliky是本人单独开发的一个selenium封装库,非常好用,公司里我所在一整条业务线都用上了噢,可以通过pip来安装,下面简单介绍一下. 一. seliky特性 语法简洁,省去了原生冗长的句式. ...
- 【Gerald and Giant Chess】
一道计数类DP例题~~~ ps:P党似乎不多了-- 我这只蒟蒻第一次写题解,而且计数类DP还是早上刚学的,现学现用,或者说是所谓的"浅谈"一番吧!况且这题写题解的人似乎并不多(大佬 ...
- JR文摘_TNFi和阿贝西普降低RA患者CVD风险
转自 Dr Jack Cush的Twitter (2020-08-19) JR文摘: 18754例RA患者前瞻性观察到1801次CVD事件,与csDMARDs相比, TNFi(HR: 0.82, 95 ...
- XMLHttpRequest、Ajax、Fetch与Axios
1. 引言 XMLHttpRequest.Ajax.Fetch与Axios是网页前后端交互中常见到的名词 参考MDN:Ajax - Web 开发者指南 | MDN (mozilla.org) Ajax ...
- python中time模块的常用方法的转换关系图
获取当前的时间戳 把时间戳转换成了时间的格式 获取时间 把时间格式数据转换为易识别的字符串 获取到表示时间的字符串,再转换为时间数据.
- CCProxy网络代理小试牛刀
CCProxy可以完成两项大的功能:代理共享上网和客户端代理权限管理.只要局域网内有一台机器能够上网,其他机器就可以通过这台机器上安装的CCProxy来代理共享上网,最大程度的减少了硬件费用和上网费用 ...