作者:轻淞猪 | 来源:互联网 | 2023-09-03 17:37
SourceMap生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,SoutceMap就会逆向得到源代码,须在打包之后的代码文件的末尾位置例如添加#s
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没有一个通用的状态,除非用到框架,因为框架本身
是一个模板,完整代码如下: