热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

浅谈Webpack模块打包工具三

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

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

 



推荐阅读
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • 使用jqTransform插件美化表单
    jqTransform 是由 DFC Engineering 开发的一款 jQuery 插件,专用于美化表单元素,操作简便,能够美化包括输入框、单选按钮、多行文本域、下拉选择框和复选框在内的所有表单元素。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 本文介绍了如何使用 CMD 批处理脚本进行文件操作,包括将指定目录下的 PHP 文件重命名为 HTML 文件,并将这些文件复制到另一个目录。 ... [详细]
  • 解决Win10下MySQL连接问题:Navicat 2003无法连接到本地MySQL服务器(10061)
    本文介绍如何在Windows 10环境下解决Navicat 2003无法连接到本地MySQL服务器的问题,包括启动MySQL服务和检查配置文件的方法。 ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
author-avatar
轻淞猪
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有