0.jpg
什么是SourceMap?
在讲SourceMap配置之前，我们先来认识一下什么是SourceMap，首先我们打开之前我们练习的代码，对项目结构做一些更改，我们修改index.js的内容为
console.log('hello world')
修改配置文件为
module.exports = {
mode: 'development',
devtool: 'none',
entry: {
main: './src/index.js',
},
...
因为我们在development模式下，是默认开启SourceMap的，现在我们手动将它关掉。
然后打包，运行/dist/index.html发现代码没有问题，这时候，我们故意将console打错，随便写个字段，这时候打包运行代码，你会发现页面报这样的错
捕获.PNG
但我们点击右边提示进入的代码片段，却是
/dist/main下的代码，但我们希望代码写错了以后，是直接告诉我们源代码哪里出错了，就像上面的情况，我们希望是告诉我们是在index.js的第一行代码写错了那我们就可以通过SourceMap来解决这个问题
SourceMap是一种映射关系，他知道上面dist目录下的第96行代码对应着src目录下的第一行代码
所以我们就可以知道。其实是src目录下的index.js下的第一行出错了，我们接下来在配置中开启sourceMap
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
main: './src/index.js',
},
...
这时候，我们再打包运行，这时候再通过地址定位到出错代码的时候，就直接定位到index.js了。 这时候你会发现在dist目录下会生成一个map.js文件，这个文件所对应的就是这种映射关系。
我们打开官网就会发现，在配置项devtool项下，其实就是在配置sourceMap，我们也发现配置项也不止我们配置的一种，那么对着文档自己试一试吧
-
inline-source-map: 将不再生成map.js文件，而是通过data-url的形式直接注入到我们的main.js文件中 -
inline-cheap-source-map: 其中cheap的意思是，当我们代码量很大的时候，一般报错会精确到第几行的第几个字符上，这样就会比较耗费性能，我们使用cheap字段就会省去精确到第几个字符的操作，并且，加上cheap字段后，sourceMap只会帮我们映射我们的业务代码和打包文件之间的关系，将不会在去管第三方的一些引入代码的映射。这样的打包性能就会比inline-source-map高了。 -
cheap-module-source-map其中module的作用是我们开启对第三方模块的映射 -
eval，我们设置了eval后会发现表面上是一样的，但其实看main.js中，eval选项是通过eval的形式，注入进了打包代码代码一种映射关系，这种效率是最高的，但是，当我们遇到比较复杂的代码的时候，他提出出来的错误内容可能并不会很全面。
最佳实践
在平常的开发中，这里建议大家本地开发环境就用cheap-module-eval-source-map，这样提示错误信息也是相对来说比较全面的。打包速度也是相对来说比较快的。
在生产模式下，也就是production模式下，我们一般都是打包代码上线，不去开启SourceMap的，但如果我们想要看出比较详细的错误信息，我们可以配置cheap-module-source-map，这样的效果相对来说也会好一点。
写在最后
这里我们讲了sourceMap的用法和最佳配置，有想了解SourceMap具体原理的同学可以看我下面推荐的两篇文章
https://segmentfault.com/a/1190000008315937
阮一峰大神的博客
网友评论