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

在这里只使用inline-source-map选项(source map有很多选项,其他的请详细阅读webpack指南)

webpack.config.js

  module.exports = {
.... + devtool: 'inline-source-map', ...
};

print.js,调试

  export default function printMe() {

     cosnole.error('I get called from print.js!');

  }

运行之后

可以很清晰看到报错的源文件

webpack学习_使用source map的更多相关文章

  1. webpack学习_管理输出(管理资源插件)

    管理输出步骤 Step1:在src新建文件print.js添加逻辑 Step2:在src/index.js import 引用新添加的逻辑 Step3:更新dist/index.html文件,修改引入 ...

  2. webpack学习_资源管理(loader)

    webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件 引入资源步骤 Step1:安装你需要的loader  Step2:在 module配 ...

  3. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

  4. webpack使用devtool :source map插件

    链接 : https://www.cnblogs.com/chris-oil/p/8856020.html

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

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

  6. 让 webpack 加载 Source Map

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

  7. webpack之source map

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

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

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

  9. Source Map调试压缩后代码

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

随机推荐

  1. rhel-6.3-i386安装samba

    1.安装samba 1).安装软件 rpm –ivh /mnt/Packages/samba-3.5.10-125.el6.i686.rpm 2).创建用户 useradd myadmin 3).设置 ...

  2. 使用 Angular 打造微前端架构的 ToB 企业级应用

    这篇文章其实已经准备了11个月了,因为虽然我们年初就开始使用 Angular 的微前端架构,但是产品一直没有正式发布,无法通过生产环境实践验证可行性,11月16日我们的产品正式灰度发布,所以是时候分享 ...

  3. 关于JDK源码:我想聊聊如何更高效地阅读

    简介 大家好,我是彤哥,今天我想和大家再聊聊JDK源码的几个问题: 为什么要看JDK源码 JDK源码的阅读顺序 JDK源码的阅读方法 为什么要看JDK源码 一,JDK源码是其它所有源码的基础,看懂了J ...

  4. Sql server中用现有表中的数据创建Sql的Insert插入语句

    之前,在Codeproject发表过一篇关于用现有表中数据创建Insert的Sql语句的存储过程,今天将其搬到这里来,注意本存储过程仅适用于SQL SERVER. 介绍 一些时候,你想导出一些现有表中 ...

  5. day 22 面向对象的基础

    面向对象: 1.简述编写和执行类中的方法的流程 class Foo: #类的编写 def func(): print("我爱你") obj = Foo() #类的调用和执行 obj ...

  6. JVM(2)--深入理解java对象创建始终

    java对象探秘 java是一门面向对象的语言,我们无时无刻不在创建对象和使用对象,那么java虚拟机是如何创建对象的?又是如何访问对象的?java对象中究竟存储了什么运行时所必需的数据?在学习了ja ...

  7. Linux进阶文档丨阿里架构师十年Linux心得,全在这份文档里面

    Linux是什么 Linux就是个操作系统: 它和Windows XP.Windows 7.Windows 10什么的一样就是一个操作系统而已! Linux能干什么: 它能当服务器,服务器上安装者各种 ...

  8. 阿里架构师的这一份Spring boot使用心得:网友看到都收藏了

    阿里架构师的这一份Spring boot使用心得: 这一份PDF将从Spring Boot的出现开始讲起,到基本的环境搭建,进而对Spring的IOC及AOP进行详细讲解.以此作为理论基础,接着进行数 ...

  9. Process用法与进程详解

    僵尸与孤儿进程 僵尸进程:父进程的子进程结束的时候父进程没有wait()情况下子进程会变成僵尸进程 孤儿进程(无害) 一个父进程退出,而它的一个或多个子进程还在运行,那么那些子进程将成为孤儿进程.孤儿 ...

  10. Nginx源码构建

    1.上传或下载nginx软件包,并解压 rz 2.搭建nginx安装环境 yum install gcc-c++ zlib-devel pcre-devel openssl-devel automak ...