Source Map是浏览器对于混淆压缩代码与源码之间做转换的技术，方便开发者调试的。浏览器默认是不加载的Source Map文件的，只有在浏览器弹出调试控制台的时候才会加载。所以线上要使用单独的.map文件存储Source Map，才能保证页面性能。（后边会讲到具体的配置方式）。
Webpack的Source Map可以通过配置项devtools配置。也可以通过webpack自带的SourceMapDevToolPlugin来处理一些特殊的情况。
sourcemap的配置项
-
eval：生成代码 每个模块都被eval执行，并且存在@sourceURL。
-
cheap-eval-source-map：在eval的基础上，包含一个使用base64编码的代码作为DataUrl。
-
cheap-module-eval-source-map：比cheap-eval-source-map包含了loader生成Source Map。
-
eval-source-map：原始代码 同样道理，但是最高的质量和最低的性能。
-
cheap-source-map：生成没有列号的Soure Map文件。
-
cheap-module-source-map：生成包含loader的Source Map。
-
source-map：质量最高，最完整的Source Map，但是生成速度也是最慢的。
看上去有很多个选项，实际上是单项的组合，单项具体意思如下：
eval：生成代码 每个模块都被eval执行
cheap：生成Source Map 不包含列的信息，也不包含loader的Source Map信息。
module：生成的Source Map包含loader的信息。
source-map：生成最完整，最高质量的Source Map，并产生.map文件。
inline：将.map文件昨晚DataUrl嵌入，不单独生成.map文件（配置比较少见）
实践
eval：如果把webpack的devtool配置成eval，每一个模块被包裹在了eval函数中。
source-map：当把配置项eval替换成为了source-map时，相应位置中的eval消失了。eval部分变成了匿名函数了。
在文件最后还增加了.map文件的引用（线上该位置应该是一个完整的地址）。去构建目录中观察发现对应的.map文件时已经生成。
eval-source-map:接着将eval与source-map一起使用,比eval模式多了sourceMappingURL。sourceMappingURL的内容是将生成的Source Map使用base64进行编码后的内容。
cheap-eval-source-map:接下来在浏览器中看加入了cheap模式的结果
源码：
<template>
<div class="page">
</div>
</template>
<script>
console.log(123123);
export default {
components: {
// TypeTableColumn,
},
name: "component-test",
data() {
return {
text: "测试1",
};
},
created() {
},
methods: {
async counter() {
},
},
};
</script>
不加入cheap：浏览器展示为下图
加入cheap：浏览器展示为
发现加入cheap后vue的template标签中的内容不见了。这是因为cheap在不生成列信息的同时去掉loader生成的Source Map信息。所以丢失了template标签的内容。通过浏览器控制台使用快捷键command + o 输入行列信息定位，由于缺少列信息，是没法跳到指定位置的，跳转演示。如果只输入行信息则是可以跳转的。
由于列信息并不是特别重要，那么既不想要列信息，又想要loader生成的Source Map怎么办哪，这个时候需要module模式，该模式就是让生成的Source Map信息包含loader生成Source Map。
cheap-module-eval-source-map:
加入了module就可以看到完成的源码了。
一些经验
线下开发环境需要能够看到对应的信息，又不是很重视页面性能信息，所以线下使用cheap-module-eval-source-map更好。
线上环境由于注重页面性能eval并不高效所以去掉eval，线上使用**cheap-module-source-map更好。**而线上需要source-map可能会被存储在静态资源云上，需要配置公共路径信息。所以webpack往往线上使用SourceMapDevToolPlugin插件进行更为精细的source-map配置。
