Webpack中SourceMap的配置_10

开始之前对项目做一些修正，删除dist文件夹，font文件夹和index.scss文件。index.js目录中输出一句hello world
webpack配置如下图，
打包之后输出 hello world

因为现在我们的开发模式是 development，默认把SourceMap配置进去了，所以为了演示，配置devtool:"none"，关闭SourceMap，如果是webpack4 devtool:"none"

打包之后打开html，正常在html中输出 hello world

那这个SourceMap到底是什么东西了
我们在index.js故意把单词写错，再进行打包，可以成功打包

当然在浏览器中肯定会报错，

于是我们想查看报错的地方，但是打开的文件是打包后的main.js的第七行，

我们希望在开发的时候，打包的时候告诉我们是源代码哪一行代码错了，而不是告诉我在打包之后的文件中那里出错了。我们就可以通过SourceMap来做这个事情。
SourceMap它是一个映射关系，它知道dist目录下main.js文件的第7行有问题，实际上对应的是index.js文件的第一行。当前其实是index.js第一行代码出错了。
我们现在就使用SourceMap，把 devtool:"source-map"加上，重新打包

打开index.html，提示我们index.js第一行代码出错了，这就是我们SourceMap的意义，看源代码的报错，而不是打包之后的文件。


打包的目录下会多一个main.js.map文件，这个文件就是SourceMap的映射表

查阅webpack的官方文档，这些 + 代表提高构建效率，因为SrouceMap要在源代码和打包的文件中构建一个映射，因此速度比较慢，用 - - 表示

那这个inline-source-map又是什么呢？我们尝试使用一下

执行打包命令，此时发现打包的dist目录下面main.js.map映射表不见了

事实上，当你使用 inine-source-map的时候这个main.js.map文件通过dataUrl的形式写在了main.js里面，以base64字符串的形式放在main.js的底部。这就是Inline-source-map的作用

有的时候我们会发现source-map 前面会多一个cheap ,eval这样的内容，他们可以通过“-”进行组合
我们先来看cheap的作用是什么

注意顺序，不然会报错，打包之后，似乎所有东西都没有变化。
实际上，如果你devtool中没有这个cheap，这SourceMap会告诉你在哪一行代码第几个字符出了问题，精确到哪一行哪一列。但是这样的映射它比较耗费性能，我代码出错了，我只需要你告诉我哪一行有问题就行了，不需要那么精确。所以这个cheap的作用就是这个。所以使用cheap的时候，打包的性能就会得到提升

SourceMap只会对我们的业务代码做一个映射关系，如果业务代码出错了，就会提示我们业务代码的问题，它不会管引入的一些第三方模块loader里面的一些问题。如果你想不仅仅只管业务代码，还管第三方代码的映射，这个时候可以加上一个module。
那这个eval又是什么呢？eval是打包速度最快的一种方式。


eval一样可以帮我们定位问题，但是main.js下面并没有SourceMap那种base64的字符串映射表，而是通过eval函数来执行映射关系的。eval是执行速度最快，性能最好的一种打包方式。但是针对于比较复杂的业务代码情况下，eval提示出的信息可能不那么全面。

最好的实践是

如果在开发环境下：

mode: "development"
devtool: "cheap-module-eval-source-map"
// 提示方式比较全面，同时打包速度也是比较快的

如果在生产环境下：

// 生产环境下一般不用配置SourceMap，但如果出了问题想要提示，如下配置
mode: "production"
devtool: "cheap-module-source-map"