SourceMap的配置
什么是SourceMap？
在webpack.config.js，在开发者模式mode: "development"下，默认SourceMap已经配置好，所以我们先关闭SourceMap
mode: "development",
devtool: 'none',
重新运行打包就可以了，发现运行成功，那么SourceMap到底是什么东西呢？
如果故意定义错误语法，例如consele.log('hello word!')，打包不会有问题，页面运行会出错
想看哪里出了错，就会点击右侧提示看看代码哪里报错
但是这是我们打包出来dist文件下main.js的代码，可是我们希望当代码写错了的时候，不要告诉我们是打包的文件里到底是哪一行代码，我们想要知道原代码中里哪一句代码错了。怎么办呢，我们就可以通过SourceMap来做这样的事情。
SourceMap是一个映射关系，她知道打包出来的js文件对应的原代码，通过这个映射关系我们就可以知道是哪一行代码出错了
如何使用这种映射关系呢
只需要在webpack.config.js的devtool配置为source-map就可以了
打包运行，点击报错
就可以看到是index.js文件报错了。
这就是SourceMap的意义，我们看报错，是想看原代码的报错，而不是打包之后的文件报错
官网学习：DOCUMENTATION—>CONFIGURATION—>Devtool
可以看到devtool的配置选项有很多。
当选择source-map的时候，build和rebuild的速度都是 --， --表示的是比较慢，意思是在devtool配置的是source-map的时候，打包的过程实际上会变慢，因为打包的过程中需要构建这种映射关系，同时，当devtool设置为source-map的时候，在打包目录dist下会有一个main.js.map的文件，该文件里面是一个对应映射关系
devtool: inline-source-map 是啥效果，打包运行，浏览器查看一样是提示原代码的错误，看起来和source-map没啥区别，但是inline是怎么回事呢
在打包文件dist，没有main.js.map这个文件，原因是当使用inline-source-map的时候，这个map文件会通过dataURL的方式直接写在main.js中
当使用inline-source-map的时候，map.js文件会变成一个base64 的字符串被放到main.js的底部，这就是inline-source-map的作用
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是什么意思呢
在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的方式一起执行，这样的话会提高打包的速度。
