热门标签 | 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,以提高开发效率和应用性能。 ... [详细]
  • 深入浅出 webpack 系列(二):实现 PostCSS 代码的编译与优化
    在前一篇文章中,我们探讨了如何通过基础配置使 Webpack 完成 ES6 代码的编译。本文将深入讲解如何利用 Webpack 实现 PostCSS 代码的编译与优化,包括配置相关插件和加载器,以提升开发效率和代码质量。我们将详细介绍每个步骤,并提供实用示例,帮助读者更好地理解和应用这些技术。 ... [详细]
  • 为开发者提供了一系列实用的参考网站和资源链接,包括HTML速查手册( 和 ),帮助开发者快速查找和学习相关技术知识。此外,还涵盖了其他重要的开发工具和文档,为编程工作提供全面支持。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 本文详细解析了 Yii2 框架中视图和布局的各种函数,并综述了它们在实际开发中的应用场景。通过深入探讨每个函数的功能和用法,为开发者提供了全面的参考,帮助他们在项目中更高效地利用这些工具。 ... [详细]
  • 在不使用Webpack和单文件组件的情况下,构建Vue组件系统的可行性探讨 ... [详细]
  • 基于Java和SSM框架的志愿者管理平台源代码分析与实现
    本研究针对基于Java和SSM框架的志愿者管理平台进行了详细的源代码分析与实现。该平台属于Java Web项目,采用Java EE技术栈,并结合了Spring、Spring MVC和MyBatis三大核心框架(非开源)。项目名称为“基于SSM的志愿者管理系统”,旨在提升志愿者管理的效率和规范性。通过对系统架构、模块设计及关键代码的深入解析,本文为开发者提供了全面的技术参考和实践指导。 ... [详细]
  • VS2019 在创建 Windows 恢复点时出现卡顿问题及解决方法
    在使用 Visual Studio 2019 时,有时会在创建 Windows 恢复点时遇到卡顿问题。这可能是由于频繁的自动更新导致的,每次更新文件大小可能达到 1-2GB。尽管现代网络速度较快,但这些更新仍可能对系统性能产生影响。本文将探讨该问题的原因,并提供有效的解决方法,帮助用户提升开发效率。 ... [详细]
  • 深入解析:Synchronized 关键字在 Java 中对 int 和 Integer 对象的作用与影响
    深入探讨了 `Synchronized` 关键字在 Java 中对 `int` 和 `Integer` 对象的影响。尽管初看此题似乎简单,但其实质在于理解对象的概念。根据《Java编程思想》第二章的观点,一切皆为对象。本文详细分析了 `Synchronized` 关键字在不同数据类型上的作用机制,特别是对基本数据类型 `int` 和包装类 `Integer` 的区别处理,帮助读者深入理解 Java 中的同步机制及其在多线程环境中的应用。 ... [详细]
  • Vim 编辑器功能强大,但其默认的配色方案往往不尽如人意,尤其是注释颜色为蓝色时,对眼睛极为不友好。为了提升编程体验,自定义配色方案显得尤为重要。通过合理调整颜色,不仅可以减轻视觉疲劳,还能显著提高编码效率和兴趣。 ... [详细]
  • 虚函数表指针vptr的功能测试与分析
    类的虚函数调用依赖于虚函数表来实现。虚函数表是由编译器自动生成的一段内存区域,用于存储包含虚函数的类中每个虚函数的入口地址。这些入口地址本质上是指针类型,从而使得动态绑定成为可能。本文对虚函数表指针(vptr)的功能进行了详细的测试与分析,探讨了其在多态性和继承机制中的作用及其性能影响。 ... [详细]
  • 在 Mac 上查看隐藏文件和文件夹的详细指南。通过终端命令,您可以轻松地显示或隐藏这些文件。具体步骤如下:输入 `defaults write com.apple.finder AppleShowAllFiles -bool true` 以显示所有隐藏文件,或使用 `defaults write com.apple.finder AppleShowAllFiles -bool false` 以重新隐藏它们。此方法适用于各种版本的 macOS,帮助用户更好地管理和访问系统文件。 ... [详细]
  • 在 Linux 环境下,多线程编程是实现高效并发处理的重要技术。本文通过具体的实战案例,详细分析了多线程编程的关键技术和常见问题。文章首先介绍了多线程的基本概念和创建方法,然后通过实例代码展示了如何使用 pthreads 库进行线程同步和通信。此外,还探讨了多线程程序中的性能优化技巧和调试方法,为开发者提供了宝贵的实践经验。 ... [详细]
  • DRF框架中Serializer反序列化验证机制详解:深入探讨Validators的应用与优化
    在DRF框架的反序列化验证机制中,除了基本的字段类型和长度校验外,还常常需要进行更为复杂的条件限制校验。通过引入`validators`模块,可以实现自定义校验逻辑,如唯一字段校验等。本文将详细探讨`validators`的使用方法及其优化策略,帮助开发者更好地理解和应用这一重要功能。 ... [详细]
  • JavaScript XML操作实用工具类:XmlUtilsJS技巧与应用 ... [详细]
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社区 版权所有