浅谈Webpack模块打包工具三

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没有一个通用的状态,除非用到框架,因为框架本身

是一个模板,完整代码如下:

 

posted on 2021-02-08 21:48  メSerendipity  阅读(143)  评论(0编辑  收藏

导航