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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。