前端的业务越来越庞大,导致我们需要引入的js等静态资源文件的体积也越来越大,不得不使用压缩js文件的方式来提高加载的效率。

编译工具的诞生,极大地方便了我们处理js文件的这一过程,但压缩后的js文件极难阅读,也难以调试,所以就产生了sourcemap这个功能。

webpack开启sourcemap功能可以通过压缩代码的堆栈行、列号定位到源码的具体位置,我们就以webpack为例来看看如何利用sourcemap反向定位线上源码。

SourceMap是一种映射关系。当项目运行后,如果出现错误,我们可以利用sourceMap反向定位到源码。在chrome浏览器里边解析当然是非常强大,也非常方便了,但是我们想对线上的压缩代码进行逆向定位,像这样远程解析就有些难度了。解析工具就是npm:source-map;

正常的sourceMap配置如下:

const path = require('path');

module.exports = {
devtool: 'source-map', // SourceMap的模式(见下表)
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夹
}
}

SourceMap不同模式的特点(见下表)

模式 解释
eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL.
source-map 生成一个SourceMap文件(编译速度最慢)
hidden-source-map 和 source-map 一样,但不会在 bundle 末尾追加注释.
inline-source-map 生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map 每个module会通过eval()来执行,并且生成一个DataUrl形式的SourceMap.
cheap-source-map 生成一个没有列信息(column-mappings)的SourceMaps文件,不包含loader的 sourcemap(譬如 babel 的 sourcemap)
cheap-module-source-map 生成一个没有列信息(column-mappings)的SourceMaps文件,同时 loader 的 sourcemap 也被简化为只包含对应行的。

webpack版本不同,生成source-map的方式也不同,今天我们就以webpack2.0+ 、和webpack4.0+这两个版本来讲讲sourcemap的配置和解析,其他版本没试过,原理相同,心累。

一、webpack2.0+配置devtool,生成sourceMap

webpack2.0+关于sourceMap的正确配置如下:

const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
plugins: [
new UglifyJSPlugin({ // 1. 这个配置必须
sourceMap: true
}),
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 这个配置必须
}

从webpack的文档上可以看到,只要设置devtool选项就可以了,但是你是无法解析出来,为什么?因为你生成的sourceMap文件中,没有包含sourcesContent这个属性,所以无法解析出源码的内容。

如果你加上 UglifyJSPlugin这个插件以后,并且配置了sourceMap属性后,就能够正常生成带sourcesContent属性的.map文件了。

所以在你想要利用sourceMap反向定位源码的时候,就需要保证你的.map文件包含sourcesContent这个属性就可以了,我们来看看解析的效果:

就这样,webpack2.0+版本的sourceMap就可以这样解析出来了。

二、webpack4.0+配置devtool,生成sourceMap

webpack4.0生成souceMap的方式非常简单,先去看webpack的官网,文档非常详细、种类繁多。但是想要通过这些方式对线上压缩过的js代码进行逆向解析,那简直是不可能。当然,webpack的这个配置也不是为了让你去解析线上压缩代码的,在浏览器的devtool里解析解析就好了。废话不多说,进入正题。

第一步、生成生产环境min.js 和 min.js.map文件

生产版的文件要压缩体积,所以必须配置optimization.minimize=true,但是同时也让mim.js.map文件失去了sourcesContent属性,因此无法解析出源代码了。配置如下:

const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
optimization: { // 1. 这个配置必须
minimize: true
},
plugins: [
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 这个配置必须
}

第二步、生成本地环境min.js.map文件

生成本版min.js.map文件,配置optimization.minimize=true,告诉webpack不压缩js代码,这样生成的.min.js.map文件就能够包含最全面的源代码,从而能够反向定位源码了。配置如下:

const buildConfig = {
mode: "production",
output: {
path: distPath,
filename: "./js/[name].[hash].min.js",
publicPath: "./"
},
optimization: { // 1. 这个配置必须
minimize: false
},
plugins: [
].concat(baseConfig.htmlArray),
devtool: "source-map" // 2. 这个配置必须
}

第三步、解析生产环境min.js.map文件,获得本地环境min.js.map文件的行列号

通过第一次解析生产版的sourceMap文件,可以得到本地版sourceMap文件中源码的位置,我们得到了新的行列号:A、B。为我们下一次解析做准备。

第四步、根据第三步获得的新行列号A、B,解析真正的源代码

将新的行列号A,B代入到本地版的sourceMap文件中,就可以解析出真正的源代码位置了,结果如下图:

因为webpack4.0以上生成和解析sourceMap的步骤相对较为复杂,所以很少能够在网上找到真正能够解析成功的文档。

到此,如何利用sourceMap反向定位生产环境的源码位置,就讲解完了,你学会了吗。

Webfunny知识分享:webpack sourceMap解析源码的更多相关文章

  1. Flink 源码解析 —— 源码编译运行

    更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...

  2. EventBus源码解析 源码阅读记录

    EventBus源码阅读记录 repo地址: greenrobot/EventBus EventBus的构造 双重加锁的单例. static volatile EventBus defaultInst ...

  3. 老李分享:走读unittest源码

    老李分享:走读unittest源码   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试开发工程师就业培训感兴趣 ...

  4. 性能测试分享: Jmeter的源码分析main函数参数

    性能测试分享: Jmeter的源码分析main函数参数   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大 ...

  5. 干货分享之Spring框架源码解析01-(xml配置解析)

    记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea Spring 是一个工厂,是一个负责对象的创建和维护的工厂.它给我 ...

  6. Webfunny知识分享:JS错误监控

    现在的前端开发已不再是刀耕火种的年代了,各种框架.编译工具层出不穷,前端监控系统也不甘其后,遍地开花. 前端正承受着越来越重的职责,前端的业务也变得越来越复杂,此时此刻我们就更需要一套完善的监控系统来 ...

  7. js便签笔记(10) - 分享:json2.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  8. js便签笔记(10) - 分享:json.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  9. 干货分享之spring框架源码分析02-(对象创建or生命周期)

    记录并分享一下本人学习spring源码的过程,有什么问题或者补充会持续更新.欢迎大家指正! 环境: spring5.X + idea 之前分析了Spring读取xml文件的所有信息封装成beanDef ...

随机推荐

  1. Nodejs同步和异步编程

    同步API:只有当前API执行完成后,才能继续执行下一个API:异步API:当前API的执行不会阻塞后续代码的执行. 同步异步代码执行顺序 同步:从上到下依次执行,前面代码会阻塞后面代码的执行.异步: ...

  2. PDO::quote

    PDO::quote — 为SQL语句中的字符串添加引号.(PHP 5 >= 5.1.0, PECL pdo >= 0.2.1) 说明 语法 public string PDO::quot ...

  3. 7.3 NOI模拟赛 苹果 随机 高维前缀和

    头一次遇到高维前缀和的题目 所以赛时不太会写. \(n\cdot Mx\cdot log\)的暴力做法这里不再赘述. 容易想到随机一个数字 然后其有\(\frac{1}{2}\)的概率在答案的集合中. ...

  4. synchronized的锁升级/锁膨胀

    偏向锁 偏向第一个拿到锁的线程. 即第一个拿到锁的线程,锁会在对象头 Mark Word 中通过 CAS 记录该线程 ID,该线程以后每次拿锁时都不需要进行 CAS(指轻量级锁). 如果该线程正在执行 ...

  5. 如何在Spring异步调用中传递上下文

    以下文章来源于aoho求索 ,作者aoho 1. 什么是异步调用? 异步调用是相对于同步调用而言的,同步调用是指程序按预定顺序一步步执行,每一步必须等到上一步执行完后才能执行,异步调用则无需等待上一步 ...

  6. 使用javaScript 取cookie时需要注意的

    function getCookie(name) { var cookies = window.top.document.cookie.split('; ');//分号后面有个空格 for (var ...

  7. resultMap的用法以及关联结果集映射

    resultType resultType可以把查询结果封装到pojo类型中,但必须pojo类的属性名和查询到的数据库表的字段名一致. 如果sql查询到的字段与pojo的属性名不一致,则需要使用res ...

  8. IDEA插件配置推荐

    一.配置 [自动编译]如下图配置:推荐指数[***] [忽略大小写]说明:IDEA默认是匹配大小写,此开关如果未关,你输入字符一定要符合大小写.比如敲string是不会出现代码提示或只能补充.但是如果 ...

  9. Java线程生命周期与状态切换

    前提 最近有点懒散,没什么比较有深度的产出.刚好想重新研读一下JUC线程池的源码实现,在此之前先深入了解一下Java中的线程实现,包括线程的生命周期.状态切换以及线程的上下文切换等等.编写本文的时候, ...

  10. Java 循环语句及流程控制语句

    java循环语句while与do-while 一 while循环 while循环语句和选择结构if语句有些相似,都是根据条件判断来决定是否执行大括号内的执行语句. 区别在于,while语句会反复地进行 ...