追踪错误和警告,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. Mac 下安装并配置 Tomcat

    1,下载 点击 官网 ,进入下载页面, 2,安装 解压出来,即安装完成. 移动解压后的文件,换个文件目录(方便集中管理),将它改个名字(毕竟名字太长了). 我将其改名为 tomcat9 ,移入资源库目 ...

  2. Python 编程语言要掌握的技能之一:编写条件分支代码的技巧

    Python 里的分支代码 Python 支持最为常见的 if/else 条件分支语句,不过它缺少在其他编程语言中常见的 switch/case 语句. 除此之外,Python 还为 for/whil ...

  3. 浅谈.NET中的反射

    一.概述  1.通过反射可以提供类型信息,从而使得我们开发人员在运行时能够利用这些信息构造和使用对象 2.反射机制允许程序在执行过程中动态地添加各种功能 二.运行时类型标识 1.运行时类型标志(RTT ...

  4. 移动端App uni-app + mui 开发记录

    前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原 ...

  5. Socket模拟SSH

    Socket模拟SSH 主要思路 客户端发送相关命令到服务端,服务端执行命令(通过subprocess模块实现)然后将结果返回给客户端 小知识 Linux中可以发送空数据,服务端能接受到空数据 win ...

  6. Spring Cloud(二):Eureka 服务注册中心

    前言 服务治理 随着业务的发展,微服务应用也随之增加,这些服务的管理和治理会越来越难,并且集群规模.服务位置.服务命名都会发生变化,手动维护的方式极易发生错误或是命名冲突等问题.而服务治理正是为了解决 ...

  7. 品HashMap(java8)

    前言 作为java开发人员,HashMap可谓是业务中的一把利器,9龙再次捡起这老生常谈的知识点,深入源码,细细品味. 首先,我们抛出几个关于HashMap的问题,带着问题去学习,就像捉迷藏一样有意思 ...

  8. ubuntu部署.Net Core3.1(Nginx+pm2)

    前言 虽然.NetCore已经出来很久了,但是很多初学者还是不会在linux部署.所以写一篇初学者在ubuntu下部署Core的全过程,大佬请无视. 环境搭建 ubuntu18.04 NetCore3 ...

  9. IOS中获取各个文件的目录路径的方法和NSFileManager类

    转自:http://blog.sina.com.cn/s/blog_5fb39f910101di92.html IOS中获取各种文件的目录路径的方法 iphone沙箱模型的有四个文件夹,分别是什么,永 ...

  10. 调用rest api杀死yarn上的应用

    调用rest api杀死yarn上的应用 调用yarn reat api,通过app name 获取application id public static String getApplication ...