webpack核心，SourceMap配置

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
阮一峰大神的博客