什么是Sourcemap

Sourcemap 本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。

sourceMap分类

• 内联源映射，将映射的数据之间添加在生成的文件中，在.map文件中的‘sourcesContent’字段来存放源码,加上inline
• 外联源映射，将映射数据存储在单独的映射文件中，使用标记将源链接到源码，一般会去掉源码中的注释

Sourcemap的作用

简单说 Sourcemap 构建了处理前以及处理后的代码之间的一座桥梁，方便定位生产环境中出现 bug 的位置。因为现在的前端开发都是模块化、组件化的方式，在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试，肯定不切实际，sourceMap 的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中，开发者可以在源码文件中 debug，这样就会让程序员调试轻松、简单很多。

Sourcemap的用法

Sourcemap 的种类有很多， 在生产环境下可以用process.env判断一下。 webpack中可以在devtool中设置, 在开发环境中可以配置devtool为cheap-module-source-map，方便调试。生产环境下建议采用none的方式，这样做不暴露源代码。或者是nosources-source-map 的方式，既可以定位源代码位置，又不暴露源代码。

在webpack配置source Map

webpack为source map 提供了5个关键字eval，source-map，cheap，module，inline；以及从关键字衍生出来的7种不同模式。

开发环境推荐：

cheap-module-eval-source-map

生产环境推荐：

cheap-module-source-map

代码：

let path = require("path")
module.exports = {
	mode:"none",
	entry:"./src/main.js",
	output:{
		filename:"build.js",
		path:path.join(__dirname,"dist")
	},
	devtool:"source-map"
}

//build.js
/***/ (function(module, exports) {
console.log("hello word")

/***/ })
/******/ ]);
//# sourceMappingURL=build.js.map

SourceMap总结

SourceMap 的主要作用是为了方便调试

• 映射转换过后的代码和源代码之间的关系
• 源代码引入 //# sourceMappingURL=build.js.map
• source Map 解决了源代码和运行代码不一致所产生的问题

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/10905