当 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的更多相关文章

  1. webpack之source map

    先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElemen ...

  2. 第五十八篇:webpack的Source Map

    好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...

  3. [Javascript] Webpack Loaders, Source Maps, and ES6

    Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...

  4. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  5. 让 webpack 加载 Source Map

    在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...

  6. webpack学习_使用source map

    追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...

  7. Source Map调试压缩后代码

    在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...

  8. [AngualrJS + Webpack] Production Source Maps

    When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a ...

  9. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  10. Javascript 如何生成Less和Js的Source map

    为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...

随机推荐

  1. NoSQL(简介、历史)

    NoSQL 为什么使用NoSQL 1.单机MySQL的网站 APP----->DAL------>MySQL 90年代:一个基本的网站访问量一般不会很大,单个数据库完全足够. 那个时候,更 ...

  2. scrapy的pipline的不同操作

    针对json文件 import json import os class SpyOppoPipeline: def __init__(self): self.file = open('曹姐.json' ...

  3. MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值

    MRI炎症和结构损伤指标对TNF拮抗剂治疗AS患者获持续缓解的预测价值 EULAR2015; PresentID: OP0043 PREDICTORS OF SUSTAINED REMISSION O ...

  4. CSS3--通过Animation实现简单的手指点击动画

    效果图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  5. Wayland比X11慢的若干解决办法

    1. 直接解决 1.1 kernel设置问题 有人测试树莓派上树莓派上Manjaro使用X11性能好于Wayland,下面解释说是kernel问题,并给出了一些修改建议,详见: X11 vs Wayl ...

  6. 一步步入门Jenkins+Net Core3.1+Gitlab,实现 CICD

    架构说明: 由浅入深,我们暂时不考虑分布式,安装Jenkins到用户服务器进行CICD 需要两台服务器 Gitlab:192.168.232.128:12080 源代码仓库,可以参考<安装git ...

  7. Java学习笔记(二)java流程控制

    学习笔记2 Java流程控制 这次也是跟着[狂神说Java]Java零基础学习视频通俗易懂继续学习的,持续学习,你我共勉. 一. 用户交互Scanner 1. Scanner对象 之前学的基本语法没有 ...

  8. 数据库多表连接查询中使用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 ...

  9. vue 事件传递原始 DOM 事件

    vue 事件传递原始 DOM 事件 在事件传参中传递特殊变量 $event @click= "warn('1', $event)"

  10. 【面试必备】 【ES6】学Vue前必须掌握的内容(上)

    变量声明 采用 let 和 const 分别声明变量和常量. 不用var所以不存在变量提升. 解构 ① 数组解构[ ] 等号左边允许存在默认值.变量的取值按照顺序. //之前的写法 var arr=[ ...