Webpack_（第三章）_SourceMap的配置

淡淡的烟草味﹌ 2021-12-11 14:34 645阅读 0赞

**SourceMap的配置**  
什么是SourceMap？  
在webpack.config.js，在开发者模式`mode: "development"`下，默认SourceMap已经配置好，所以我们先关闭SourceMap

mode: "development",
      devtool: 'none',

重新运行打包就可以了，发现运行成功，那么SourceMap到底是什么东西呢？  
如果故意定义错误语法，例如`consele.log('hello word!')`，打包不会有问题，页面运行会出错  
![在这里插入图片描述][20190709113435572.png]  
想看哪里出了错，就会点击右侧提示看看代码哪里报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]  
但是这是我们打包出来dist文件下main.js的代码，可是我们希望当代码写错了的时候，不要告诉我们是打包的文件里到底是哪一行代码，我们想要知道原代码中里哪一句代码错了。怎么办呢，我们就可以通过SourceMap来做这样的事情。  
SourceMap是一个映射关系，她知道打包出来的js文件对应的原代码，通过这个映射关系我们就可以知道是哪一行代码出错了  
**如何使用这种映射关系呢**  
只需要在webpack.config.js的devtool配置为source-map就可以了  
打包运行，点击报错  
![在这里插入图片描述][20190709114842376.png]  
就可以看到是index.js文件报错了。  
这就是SourceMap的意义，我们看报错，是想看原代码的报错，而不是打包之后的文件报错  
官网学习：DOCUMENTATION—>CONFIGURATION—>Devtool  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]  
可以看到devtool的配置选项有很多。  
当选择source-map的时候，build和rebuild的速度都是 --， --表示的是比较慢，意思是在devtool配置的是source-map的时候，打包的过程实际上会变慢，因为打包的过程中需要构建这种映射关系，同时，当devtool设置为source-map的时候，在打包目录dist下会有一个main.js.map的文件，该文件里面是一个对应映射关系  
![在这里插入图片描述][20190709142633454.png]  
`devtool: inline-source-map` 是啥效果，打包运行，浏览器查看一样是提示原代码的错误，看起来和source-map没啥区别，但是inline是怎么回事呢  
在打包文件dist，没有main.js.map这个文件，原因是当使用inline-source-map的时候，这个map文件会通过dataURL的方式直接写在main.js中  
![在这里插入图片描述][2019070914404192.png]  
当使用inline-source-map的时候，map.js文件会变成一个base64 的字符串被放到main.js的底部，这就是inline-source-map的作用![在这里插入图片描述][20190709144810504.png]  
`devtool: cheap-inline-source-map`的作用，打包运行，浏览器查看一样是提示原代码的错误，看起来和source-map没啥区别，再看打包生成的文件，也没main.js.map，那cheap是什么意思呢  
当我们的代码量很大的时候，如果代码除了错误，而devtool又没有加cheap，那么这个source-map会告诉你，你的代码是在哪一行的第几个字符出了问题，它会具体到哪一个行哪一列来告诉你具体问题产生的点。但是这样的一个映射比较耗费性能，代码出错只想告知哪一行即可，具体第几列无需告知，如果加了cheap，意思就是告诉只告诉我哪一行即可。cheap打包的性能会得到提升。同时加了cheap，那么source-map只针对业务代码，比如说业务代码是index.js文件，那source-map只会去映射这个文件，和它打包生成的main.js之间的一个关系，不会去管引入的第三方模块，比如说loader里面的一些问题如何映射。如果想让cheap不仅管业务代码，还想管loader的一些sourcemap的话，或者说第三方模块的里面的代码错误，可以在加一个module `devtool: cheap-module-inline-source-map` module的意思是不仅管业务代码，还管其他的loader、第三方模块里面的一些错误。  
`devtool: 'eval'` 打包运行的速度最快，打包运行，浏览器查看一样是提示原代码的错误，再看打包生成的文件，也没main.js.map，在main.js文件底下也没有base64的字符串，那eval是什么意思呢  
![在这里插入图片描述][20190709152511265.png]  
在main.js中，会以eval的形式执行，而且后面会跟一个sourceURL直接指向当前的出错的文件，和其他的用source-map打包的方式不太一样，它是通过eval这种形式来生成source-map的对应关系，eval是执行效率最快，性能做好的打包方式，但是对于比较复杂的代码，如果用eval可能提示出来的错误并不全面  
最佳实践：  
如果是开发环境，建议使用`cheap-module-eval-source-map` （提示错误全，打包速度又是比较快的）  
如果是线上环境： 建议使用`cheap-module-source-map` （没有必要有映射，非要映射的话这样配）

**SourceMap总结：**  
作用是打包生成的代码出错的话，能够在打包代码和原代码做一个映射，能够直接找到出错的原代码。  
devtool的配置选项很多：  
source-map：会生成一个map文件  
inline：会把map文件变成base64的字符串放在main.js中  
cheap： 只提示到哪一行，只管业务代码  
module： 除了业务代码，模块代码的错误也会提示  
eval：可以通过eval的方式帮助我们对代码进行打包，或者是配合source-map对代码进行打包，把对应的业务代码以及source-map以eval的方式一起执行，这样的话会提高打包的速度。

[20190709113435572.png]: /images/20211211/b44ce807bbd14412b7ceb070563b348d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70]: /images/20211211/54492328e00a44fa8d78070492fcfc26.png
[20190709114842376.png]: /images/20211211/4b74481a3347434cb8af4da199b64841.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbmlfd2Vu_size_16_color_FFFFFF_t_70 1]: /images/20211211/83ff89f2fb7845ee940484c104ca2432.png
[20190709142633454.png]: /images/20211211/a6ce6d6fb7b24b9baa05867ece499187.png
[2019070914404192.png]: /images/20211211/fb87d5a71e7d44f7a346302facccbf71.png
[20190709144810504.png]: /images/20211211/d73b505ec473416e9188c3f81a4c4501.png
[20190709152511265.png]: /images/20211211/91cef546e33e4c3190fb4d7931961d95.png