高级SourceMap
开发时我们运行的代码是经过webpack编译后的代码，例如：
如果碰见代码报错
我们在浏览器看到的错误是在webpack编译后展示的错误，如果以后项目非常庞大，不便于我们查找错误。我们希望这个错误体现在源代码的位置，这样我们可以快速解决问题。
这个时候我们就可以用到SourceMap
SourceMap(源代码映射) 是一个用来生成源代码与构建后代码一一映射的文件的方案。
他会生成一个XXX.map文件，里面包含源代码和构建后代码每一行的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后代码出错的位置找到映射后源代码出错的位置。从而让浏览器提示源代码文件出错的位置，帮助我们快速找到错误根源。
通过查看 webpackDevtool文档可知，SourceMap的值有多种情况， 但实际开发时我们只需要关注两种情况即可：
源文件
-
开发模式：
cheap-module-source-map- 优点：打包编译速度快，只包含映射
- 缺点：没有列映射
在webpack.dev.js中
运行情况
错误提示只包含行
- 生产模式:
source-map- 优点：包含行/列映射
- 缺点：打包速度慢
在webpack.prod.js中
运行情况
错误是包含行和列的（3：5）
hot
启用 webpack 的热模块替换特性：
在webpack.config.js或者webpack.dev.js中
module.exports={
devServer:{
hot: true
}
}
Tip: 从webpack-dev-server v4开始，HMR是默认启动的。它会自动应用 webpack.HotModuleReplacementPlugin，这是启用HMR必须的。
