在日常开发过程中，我们编写的源代码通过多重处理（编译，封装，压缩…），最后形成的产物代码，在浏览器中调试时，我们会发现代码变得面目全非，根本没办法调试。
因此，我们需要一种将产物代码回溯到源代码的功能，Source Map就是实现这一功能的工具。
Source Map的基本原理是，在编译过程中，在生成产物代码的同时也生成基于源代码的一份映射关系表。有了这张映射关系表，我们就可以通过 chrome 控制台中的“Enable JavaScript source map”来实现调试时的显示与定位源代码的功能。
生成Source Map的方式有很多种，他们的构建速度、质量（反解代码与源代码的接近程度以及调试时行号等辅助信息的对应情况）、访问方式（在产物文件中或单独生成 source map）、文件大小都各不相同。在开发和生成环境下我们对 source map 的期望也有所不同。

• 在开发环境中，我们更关心构建速度、质量，以便于提升开发效率，而不关心文件大小与访问方式
• 在生产环境中，我们更关注的是，是否需要开启 source map，生成文件的大小和访问方式是否对页面性能造成影响，其次才是质量和构建速度。

看到浏览器热更新，我们很容易就想到的是webpack 和 webpack-dev-server。
问题：热更新是保存后自动编译（Auto Compile）吗？还是自动刷新浏览器（Live Reload）？还是指HMR（Hot Module Replacement，模块热替换）？
先看一下什么是浏览器的热更新。浏览器的热更新，指的是我们在本地开发的同时打开浏览器进行预览，当代码发生变化时，浏览器自动更新页面的技术。这里的自动更新，表现上又分为自动刷新整个页面，以及页面整体无刷新而只更新页面的部分内容。