“源图”在上一篇webpack处理模块化源码的文章中有提到，本文就来详细说说。作用是什么？Sourcemap是用来映射编译后的代码和源代码，这样如果编译后的代码出错，可以快速定位到源文件的位置。我们打印了一个在format.js文件中不存在的hello变量。当没有sourcemap的时候，是没办法在源码中看到错误内容在什么地方的。生产环境提示错误在编译的bundle.js文件中。点击文件后，只能看到压缩和丑化后的代码。在开发环境会提示错误文件路径在src/utils/format.js，点击bundle.js文件看到的代码也是编译过的，和源代码。设置sourcemap后，可以清楚地看到源代码的目录结构，错误内容在哪个源文件、行、列。这样可以快速定位问题，修复代码。使用方法在配置文件webpack.config.js中，mode字段用于定义模式，默认生产模式为“production”，设置为开发模式，方便调试，“dev-tool”用于设置sourcemap，为了查看sourceMap定位行和列的区别，添加babel-loader。constpath=require("path");const{CleanWebpackPlugin}=require("clean-webpack-plugin");module.exports={entry:"./src/index.js",mode:"development",devtool：“内联源地图”，输出：{文件名：“./bundle.js”，路径：path.resolve（__dirname，“./dist”），}，模块：{规则：[{{}测试：/\.js$/,use:[{loader:"babel-loader",options:{presets:[@babel/preset-env"],},},],],},};26种取值可以设置，performance表示构建速度，production表示是否推荐在“生产环境”使用，建议只在开发和测试时使用sourcemap，因为在生产中暴露源码非常不安全.但是这26种sourcemap都有规律可循，了解其中几种就可以全部了解了sourcemap文件当devtool设置为source-map时，webpack会生成一个sourcemap文件，并添加一个打包后的bundle.js文件最后一行注释，指向sourcemapfi乐。sourcemap文件中有这些字段记录编译后的代码和源代码版本的映射关系：version，第一个版本的sourcemap文件的大小是源文件的10倍左右，第二个版本减少了50%，第三个版本又减少了50%，现在是第三个版本。file：编译后的文件名，用于浏览器加载mappings：用于保存与源文件的映射信息（如行、列位置信息、变量等）sources：转换前的源文件，用于webpack代码packagingsourceContent：转换前的具体代码信息（对应sources）names：转换前的变量和属性名sourceRoot：所有sources的相对根目录以上是生成sourcemap文件时的标准版本，除了一些不生成sourcemapfiles其他配置的配置类似这种方式来设置映射关系。也有可能在不生成源映射文件的情况下不需要源映射文件。有两种方法可以配置devtool使其不生成源映射文件。false：不使用sourcemapnone：mode是production的默认值（没有定义devtool时）这两个方法不会生成bundle.js.map文件，bundle.js中也不会引入bundle.js.map。inlinesource-map除了直接生成sourcemap文件外，还可以将sourcemap内容直接内联到编译好的bundle.js中。可以通过三种方式配置devtool。eval：开发模式下的默认值（不定义devtool时），通过eval函数执行文件内容，最后添加指向内容的源文件地址eval-source-map：生成的sourcemap被base64编码添加到eval函数中inline-source-map：生成的sourcemap被base64编码，放在打包文件的末尾。eval当devtool设置为eval时，在编译好的bundle.js文件中，使用eval执行文件内容，并通过//#sourceURL=指向源文件地址。至此，就可以拿到报错的文件、行、列，但是看到的代码会和源码有点出入，增加了webpack处理的部分。eval-source-map当devtool设置为eval-source-map时，文件内容通过eval函数执行，sourcemap经过base64编码后加入到eval函数中。这时候可以通过控制台看到具体的源码，错误提示是具体到行和列的。inline-source-map当devtool设置为inline-source-map时，sourcemap经过base64编码后添加到文件末尾。这时候可以通过控制台看到具体的源码，错误提示也是具体到行列的。因为sourcemap会占用很大的空间，将sourcemap内联到bundle.js文件中会增加打包文件的体积。如果错误精确到行以上，则错误信息精确到“列”，提示哪个字段错误，如果精确到“行”，则只会提示错误信息这条线。只是精确到行，编译速度会稍微快一些。设置devtool有两种方式，这两种方式都会生成一个sourcemap文件，即bunlde.js.map。cheap-source-map：只精确到行，对于loader的情况，会不够精确。cheap-module-source-map：只有精确到行，才能很好的处理loader的情况。为了演示方便，将普通函数改为箭头函数。可以看到，两者都是精确到“列”，“cheap-source-map”定位的代码与实际源代码有些不同，行列顺序也有些不同，但是“cheap-module-source-map"和源码完全一样。不显示源代码有没有办法在不显示源代码的情况下生成sourcemap？webpack还提供了两个devtool配置。hidden-source-map：会生成一个sourcemap文件，devtool定义为source-map，但是在打包文件bundle.js中，并没有引用source-map，如果手动添加，也会占用影响。nosources-source-map：会生成sourcemap，但是生成的sourcemap只有错误信息提示，不会生成源代码文件。会在控制台告诉错误的内容和文件，但是点击文件名是看不到源码的nosources-source-map此时会生成一个sourcemap文件，打包后的bundle.js也会导入map文件，也可以看到报错内容在文件中，但是无法获取源码.组合规则通过表格总结上面提到的sourcemaps。了解了这些sourcemaps之后，剩下的组合也可以推导出来，比如eval-cheap-module-source-map：不会生成sourcemap文件，而是将sourcemap以base64编码的形式添加到eval函数中，它不会精确到列，只精确到列，有loader时，可以精确定位源代码inline-nosources-source-map：不生成sourcemap文件，将sourcemap作为base64编码形式添加到编译文件的底部，不会显示源代码。但以上不能随意组合，遵循以下规则inline-|hidden-|eval：三个值任选其一，可以选择nosources：optionalvaluecheapoptionalvalue，并且可以按照module的值求和up如下inline-|hidden-|eval-[cheap-[module-]]source-map在开发、测试、生产阶段，还有一些推荐的开发阶段：source-map（vue脚手架默认值）或者cheap-module-source-map(react脚手架默认值)测试阶段：source-map或cheap-module-source-map，可以快速定位问题发布阶段：false，none（即不写）sourcemap可以帮助我们在开发和测试阶段更好的定位问题，正确使用可以提高效率。以上就是sourcemap的详细介绍。更多关于webpack的内容可以参考我的其他博文，持续更新中~
