Source Map
生产代码与开发代码完全不同，如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码,
须在打包之后的代码文件的末尾位置例如添加//# sourceMappingURL=jquery-3.4.1.min.map字段即开启sourceMap我们就
可以调试Jquery的源代码了打开浏览器调试工具的Source模块也可以看到引入的.js文件，（html引入的.min.js文件）
Webpack配置Source Map
devtool配置我们开发工程中的辅助工具及与source map相关的一些配置,webpack支持12种sourceMap的格式，每种方式的效率
和效果各不相同，如下图所示：
下面对其他模式的sourcemap进行模式对比
1.eval模式：可以运行字符串中的代码eval('console.log(123)') 默认通过在代码中添加 //#sourceURL+路径 的形式定位源码文件这种
模式不会生成sourcemap文件，这种模式的速度是最快的，但是只能定位文件名称,而不知道具体的行列信息。
2.eval-sourceMap：除了可以定位文件 还可以定位行和列的信息,生成了SourceMap。
3.cheap-eval-source-map：定位到行，而没有列的信息。
4.cheap-module-eval-source-map 跟上面的cheap-eval-source-map对比多了个module,对比代码发现module对应源代码，跟我们编
写的源代码是一摸一样的,而上面的则是编译成ES5的代码。
综上所述拼接特点,基本上我们已经可以知道所有的模式了。
5.hidden-source-map：生成了注释文件 但是代码中并没有用注释的方式引入文件 我们是看不到效果的
6.nosource-source-map 保护源代码 不允许查看
Webpack 自动刷新问题
虽然有webpack-dev-server能给我们解决大部分问题,但是也有的问题显得比较鸡肋,比如输入文本字体样式，每次编辑完成之后刷页
面字体消失 还要重新输入，Webpack提供了一种不刷新的前提下，模块也可以及时更新的方法Webpack HMR。
Webpack HMR体验：模块热替换 应用运行过程中实时替换某个模块 应用运行状态不受影响。
webpack HMR已经集成到了webpack-dev-server中 只需要加上 webpack-dev-server --hot,也可以通过配置文件去开启由于JS无法像
CSS那样有条理的覆盖,所以JS与图片等无规律的热更新需要手动配置，webpack没有一个通用的状态,除非用到框架，因为框架本身
是一个模板，完整代码如下：
原文地址：https://www.cnblogs.com/websiteblogs/p/14391197.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。