追踪错误和警告,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. SpringBoot学习(三)—— springboot快速整合swagger文档

    目录 MyBatis 简介 引入mybatis组件 代码实战 MyBatis @ 简介 优点 最大的优点是SQL语句灵活,适合调优情景,业务复杂情景 劣势 最大的劣势是不同数据库之间的迁移 引入myb ...

  2. web前端面试题总结(html、css)

    1.对 WEB 标准以及 W3C 的理解与认识? 参考: 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链 css 和 js 脚本. 结构行为表现的分离.文件下载与页面速度更快.内容能 ...

  3. Selenium+Java(四)Selenium Xpath元素定位

    前言 关于Selenium元素定位,这是最后一篇博客. Xpath定位可以实现的功能 Selenium+Java(三)Selenium元素定位中讲的定位方式也可以实现,具体要用那种定位方式要根据自己的 ...

  4. 如何优雅地在Stack Overflow提问?

    今天来给大家聊一聊 Stack Overflow,Stack Overflow 是什么呢? 什么是 Stack Overflow? Stack Overflow 是一个全球最大的技术问答网站,作为一个 ...

  5. Leetcode_01【两数之和】

    文章目录:  题目 脚本一及注释 脚本逻辑 脚本二及注释 脚本逻辑 题目: 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. ...

  6. Knative Serverless 之道:如何 0 运维、低成本实现应用托管?

    作者 | 牛秋霖(冬岛)  阿里云容器平台技术专家 关注"阿里巴巴云原生"公众号,回复关键词"1205"即可观看 Knative-Demo 演示视频. 导读:S ...

  7. mac 下面 vim 编辑器 开启语法高亮

    cp /usr/share/vim/vimrc ~/.vimrc 拷贝默认的配置文件 vim ~/.vimrc 编辑该文件 在文件的最后加入 syntax on 保存退出即可

  8. Find命令、文件名后缀、Linux和Windows互传文件 使用介绍

    第2周第5次课(3月30日) 课程内容: 2.23/2.24/2.25 find命令2.26 文件名后缀 2.27 Linux和Windows互传文件 find命令 文件查找: 1.which(一般用 ...

  9. C语言I—2019秋作业03

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 C语言I-2019秋作业03 我在这个课程的目标是 掌握if-else语句,运算关系 这个作业在那个具体方面帮助我实现目标 row 2 c ...

  10. TensorFlow2.0

    安装开发环境 1.首先安装 anaconda(https://www.anaconda.com/) 2.修改anaconda的镜像源 conda config --add channels https ...