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脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...
随机推荐
- NoSQL(简介、历史)
NoSQL 为什么使用NoSQL 1.单机MySQL的网站 APP----->DAL------>MySQL 90年代:一个基本的网站访问量一般不会很大,单个数据库完全足够. 那个时候,更 ...
- scrapy的pipline的不同操作
针对json文件 import json import os class SpyOppoPipeline: def __init__(self): self.file = open('曹姐.json' ...
- MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值
MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值 EULAR2015; PresentID: OP0043 PREDICTORS OF SUSTAINED REMISSION O ...
- CSS3--通过Animation实现简单的手指点击动画
效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- Wayland比X11慢的若干解决办法
1. 直接解决 1.1 kernel设置问题 有人测试树莓派上树莓派上Manjaro使用X11性能好于Wayland,下面解释说是kernel问题,并给出了一些修改建议,详见: X11 vs Wayl ...
- 一步步入门Jenkins+Net Core3.1+Gitlab,实现 CICD
架构说明: 由浅入深,我们暂时不考虑分布式,安装Jenkins到用户服务器进行CICD 需要两台服务器 Gitlab:192.168.232.128:12080 源代码仓库,可以参考<安装git ...
- Java学习笔记(二)java流程控制
学习笔记2 Java流程控制 这次也是跟着[狂神说Java]Java零基础学习视频通俗易懂继续学习的,持续学习,你我共勉. 一. 用户交互Scanner 1. Scanner对象 之前学的基本语法没有 ...
- 数据库多表连接查询中使用group by分组语句,Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column 'XXX' which is not functionally dependent on columns in GROUP BY claus
需求描述: 要是用两表联合查询,并对查询的结果进行分组:sql如下: 1 SELECT 2 a.`id`, 3 a.`fr_num`, 4 b.`ent_status` 5 FROM 6 `table ...
- vue 事件传递原始 DOM 事件
vue 事件传递原始 DOM 事件 在事件传参中传递特殊变量 $event @click= "warn('1', $event)"
- 【面试必备】 【ES6】学Vue前必须掌握的内容(上)
变量声明 采用 let 和 const 分别声明变量和常量. 不用var所以不存在变量提升. 解构 ① 数组解构[ ] 等号左边允许存在默认值.变量的取值按照顺序. //之前的写法 var arr=[ ...