先来一个webpack小例子，项目结构如下：

// greeter.js

module.exports = function() {

    var greet = document.createElement('div');

    greet.textContent = "Hi there and greetings!";

    return greet;

};

// main.js

const greeter = require('./Greeter.js');

document.querySelector("#root").appendChild(greeter());

// webpack.config.js

module.exports = {

    // devtool: 'eval-source-map',

    entry:  __dirname + "/main.js",

    output: {

        path: __dirname + "/dist",

        filename: "bundle.js"

    }

}

// index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body id="root"></body>

<script src="dist/bundle.js"></script>

</html>

运行结果：

页面上正常显示：“Hi there and greetings!”。

以上的例子很简单，可以直接在bundle.js中打断点进行调试。但是对于复杂的webpack程序，模块很多，如果全都在bundle中打断点进行调试，会很混乱，那该如何方便调试模块里面的逻辑呢？答案是使用webpack的source map选项。

在以上的配置文件中打开注释：

    // devtool: 'eval-source-map',

然后重新运行。然后打开浏览器的调试窗口，发现多了些东西：

双击这些文件，可以很方便地对不同js文件中的代码进行调试。

以上仅仅用到了source map的一个选项，其他的可以在这里进行参考和尝试

webpack之source map的更多相关文章

  1. 第五十八篇：webpack的Source Map

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

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

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

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

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

  4. 让 webpack 加载 Source Map

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

  5. webpack学习_使用source map

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

  6. Source Map调试压缩后代码

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

  7. [AngualrJS + Webpack] Production Source Maps

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

  8. Source Map入门教程

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

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

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

随机推荐

  1. bzoj 1022: [SHOI2008]小约翰的游戏John【anti-nim】

    如果全是1,那么n是奇数先手必败 否则,xor和为0先手必败 证明见 https://www.cnblogs.com/Wolfycz/p/8430991.html #include<iostre ...

  2. mui.init()方法中可以有子页面和预加载两项内容，它们是否都在页面加载完成时创建其对应的webview对象？

    subpages和preloadPages区别是什么? mui.init({ subpages: [{ url: 'subject.html', //子页面HTML地址,支持本地地址和网络地址 id: ...

  3. ssh密钥分发之二：使用sshpass配合ssh-kopy-id编写脚本批量分发密钥：

    使用sshpass配合ssh-kopy-id编写脚本批量分发密钥: 首先sshpass是一个ssh连接时的免交互工具,首先要安装一下: yum install sshpass -y 接下来我们就可以使 ...

  4. Lightoj 1038 - Race to 1 Again (概率DP)

    题目链接: Lightoj  1038 - Race to 1 Again 题目描述: 给出一个数D,每次可以选择数D的一个因子,用数D除上这个因子得到一个新的数D,为数D变为1的操作次数的期望为多少 ...

  5. 【loj6034】「雅礼集训 2017 Day2」线段游戏

    #6034. 「雅礼集训 2017 Day2」线段游戏 内存限制:256 MiB 时间限制:1000 ms 标准输入输出 题目类型:传统 评测方式:Special Judge 上传者: 匿名 题目描述 ...

  6. python中的sort和sorted

    共同点 都有三个参数, cmp用户自定义(指定函数),每个元素都会调用,效率没key高 key带一个参数的函数,用来为每个元素提取比较值 reverse=True    翻转 sort sort作用的 ...

  7. python实战之爬取喜玛拉雅专辑信息

    import urllib.request import json from lxml import etree url='http://www.ximalaya.com/dq/8.ajax' hea ...

  8. JUnit的好搭档-Hamcrest

    一.Hamcrest简介 Hamcrest是一个用于编写匹配器(matcher)对象的框架,允许以声明方式定义“匹配(match)”规则.它可以与JUnit框架配合使用,使断言可读更高,更加灵活(例如 ...

  9. 【转】PowerManager 与 WakeLock

    PowerManager 与 WakeLock PowerManager 用来控制设备的电源状态. 而PowerManager.WakeLock 也称作唤醒锁, 是一种保持 CPU 运转防止设备休眠的 ...

  10. day02 -操作系统及python入门

    操作系统 1.什么是操作系统? 操作系统位于计算机硬件和应用软件之间. 是一个协调.控制.管理计算机硬件资源和软件资源的控制程序. 2.为何要有操作系统? ①·控制硬件 ②·把对硬件的复杂的操作封装成 ...