浅谈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没有一个通用的状态,除非用到框架,因为框架本身
是一个模板,完整代码如下:
浅谈Webpack模块打包工具三的更多相关文章
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- 浅谈Webpack模块打包工具四
Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...
- 浅谈Webpack模块打包工具二
Webpack插件机制介绍 Loader专注实现资源模块加载,plugin解决其他自动化工作,比如清除dist目录,拷贝静态文件值输出目录,压缩输出代码等,下面列举几个plugin 的例子. Webp ...
- 浅谈python模块的导入操作
1.什么是模块 在Python中有一个概念叫做模块(module). 所谓模块,就是将代码量较大的程序分割成多个有组织的,彼此独立但双能互相交互的代码片段, 这些自我包含的有组织的代码段就是模块. 2 ...
- 浅谈webpack优化
webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和ex ...
- 模块打包工具webpack
1.webpack的安装 1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下) 1.2新建一个文件夹用于此项目 eg ...
- Webpack, 现在最流行的模块打包工具.压缩打包
压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...
- Webpack前端打包工具
一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中. 但 ...
- 浅谈maven自动化构建工具
转载https://blog.csdn.net/zxm1306192988/article/details/76209062 Maven是什么[what] 1.Maven 是 Apache 软件基金会 ...
随机推荐
- Nginx(六):配置解析之location解析
nginx成为非常流行的代理服务软件,最根本的原因也许是在于其强悍性能.但还有一些必要的条件,比如功能的完整,配置的易用,能够解决各种各样的实际需求问题,这些是一个好的软件的必备特性. 那么,今天我们 ...
- 【Oracle】10g rac如何开启归档和关闭归档
开启归档: 1.设置想设置的归档的位置,我们这里归档的位置为ASM磁盘组,磁盘组的名称为DATA alter system set log_archive_dest_1='location=+DATA ...
- 洛谷P1198 [JSOI2008]最大数(线段树/单调栈)
题目链接: https://www.luogu.org/problemnew/show/P1198 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询 ...
- oracle常用hint添加
1.视图添加索引 /* Formatted on 2020/1/6 下午 04:46:37 (QP5 v5.163.1008.3004) */ SELECT /*+index(VIEW_NAME.TA ...
- 本地jar添加到本地仓库 本地jar依赖无效问题
最近工作发生了一个很奇怪的事情,我在本地写了一个项目,打包成jar,然后敲命令mvn install:install-file -DgroupId=com.yzwine -DartifactId=yz ...
- 阿里云VOD(一)
一.阿里云视频点播 1.功能介绍 视频点播(ApsaraVideo VoD,简称VoD)是集视频采集.编辑.上传.媒体资源管理.自动化转码处理(窄带高清TM).视频审核分析.分发加速于一体的一站式音视 ...
- redis修改requirepass 参数 改密码
1. 不重启redis如何配置密码? a. 在配置文件中配置requirepass的密码(当redis重启时密码依然有效). # requirepass foobared -> 修改成 : ...
- mysql(视图 事务 索引 外键)
视图 视图本质就是对查询的封装 创建视图(定义视图 起名以v_开头) create view v_students as select classes.name as c_name ,stud ...
- SpringBoot深入理解
SpringBoot深入理解 项目打包SpringBoot启动过程 当使用打包时,会下载org-springframework-boot-loader的jar,并且不会放在lib存放的第三方jar包文 ...
- Vim中的swp文件,在vim非正常退出时,再次编辑会出问题
vim中的swp即swap文件,在编辑文件时产生,它是隐藏文件,如果原文件名是data,那么swp文件名就是.data.swp.如果文件正常退出,则此文件自动删除.以下两种情况不会删除swp文件: V ...