2023年8月1日发(作者：)

2-15webpack中sourcemap是什么？⽣产环境怎么⽤？source map指的是将编译、打包、压缩后的代码映射回源代码的过程经过webpack打包压缩后的代码基本上已经不具备可读性，此时若是代码抛出错误，想要回溯他的调⽤栈是⾮常困难的，⽽有了sourcemap，加上浏览器调试⼯具（dev tools)，要做到这⼀点就会变得很容易，同时对于线上问题的追查也有⼀定帮助。原理：webpack对于⼯程源代码的每⼀步处理都有可能会改变代码的位置、结构、甚⾄是所处⽂件，因此每⼀步都需要⽣成对应的sourcemap。sourceMap就是⼀个信息⽂件，⾥⾯储存着打包前的位置信息。也就是说，转换后的代码的每⼀个位置，所对应的转换前的位置。具体如何编码。如果我们启⽤了devtool配置，那么source map就会跟随源代码⼀步步被传递，直到⽣产最后的map⽂件，这个⽂件默认就是打包后的⽂件名字加上后缀.map，例如：.在⽣成map⽂件的同时，bundle⽂件中会追加⼀句注释来标识map⽂件的位置，例如：// (function() { // bundle的内容 ... })()// # sourceMappingURL = ⽂件只要不打开开发者⼯具，浏览器是不会加载的线上环境⼀般有三种处理⽅案hidden-source-map：借助第三⽅错误监控平台Sentry使⽤nosources-source-map：只会显⽰具体⾏数以及查看源代码的错误栈。安全性⽐source map⾼source：通过nginx设置将.map⽂件只对⽩名单开放(公司内⽹)注意的是：避免在⽣产中使⽤ inline- 和 eval- ，因为它们会增加bundle体积⼤⼩，并降低整体性能。

2023年8月1日发(作者：)

2-15webpack中sourcemap是什么？⽣产环境怎么⽤？source map指的是将编译、打包、压缩后的代码映射回源代码的过程经过webpack打包压缩后的代码基本上已经不具备可读性，此时若是代码抛出错误，想要回溯他的调⽤栈是⾮常困难的，⽽有了sourcemap，加上浏览器调试⼯具（dev tools)，要做到这⼀点就会变得很容易，同时对于线上问题的追查也有⼀定帮助。原理：webpack对于⼯程源代码的每⼀步处理都有可能会改变代码的位置、结构、甚⾄是所处⽂件，因此每⼀步都需要⽣成对应的sourcemap。sourceMap就是⼀个信息⽂件，⾥⾯储存着打包前的位置信息。也就是说，转换后的代码的每⼀个位置，所对应的转换前的位置。具体如何编码。如果我们启⽤了devtool配置，那么source map就会跟随源代码⼀步步被传递，直到⽣产最后的map⽂件，这个⽂件默认就是打包后的⽂件名字加上后缀.map，例如：.在⽣成map⽂件的同时，bundle⽂件中会追加⼀句注释来标识map⽂件的位置，例如：// (function() { // bundle的内容 ... })()// # sourceMappingURL = ⽂件只要不打开开发者⼯具，浏览器是不会加载的线上环境⼀般有三种处理⽅案hidden-source-map：借助第三⽅错误监控平台Sentry使⽤nosources-source-map：只会显⽰具体⾏数以及查看源代码的错误栈。安全性⽐source map⾼source：通过nginx设置将.map⽂件只对⽩名单开放(公司内⽹)注意的是：避免在⽣产中使⽤ inline- 和 eval- ，因为它们会增加bundle体积⼤⼩，并降低整体性能。