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模块打包工具三的更多相关文章

  1. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  2. 浅谈Webpack模块打包工具四

    Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...

  3. 浅谈Webpack模块打包工具二

    Webpack插件机制介绍 Loader专注实现资源模块加载,plugin解决其他自动化工作,比如清除dist目录,拷贝静态文件值输出目录,压缩输出代码等,下面列举几个plugin 的例子. Webp ...

  4. 浅谈python模块的导入操作

    1.什么是模块 在Python中有一个概念叫做模块(module). 所谓模块,就是将代码量较大的程序分割成多个有组织的,彼此独立但双能互相交互的代码片段, 这些自我包含的有组织的代码段就是模块. 2 ...

  5. 浅谈webpack优化

    webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和ex ...

  6. 模块打包工具webpack

    1.webpack的安装 1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下) 1.2新建一个文件夹用于此项目  eg ...

  7. Webpack, 现在最流行的模块打包工具.压缩打包

    压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...

  8. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...

  9. 浅谈maven自动化构建工具

    转载https://blog.csdn.net/zxm1306192988/article/details/76209062 Maven是什么[what] 1.Maven 是 Apache 软件基金会 ...

随机推荐

  1. 【Oracle】如果有一个Oracle中的用户，想知道他有什么权限，怎么查看？

    假如那到了一个新用户,test,想查看这test的所有权限都有哪些,可以这么操作 登录到test用户上,执行下面的SQL 1.查看test用户被赋予了哪些角色. select * from user_ ...

  2. 鸿蒙的fetch请求加载聚合数据的前期准备工作-手动配置网络权限

    目录: 1.双击打开"config.json"文件 2.找到配置网络访问权限位置1 3.配置内容1 4.默认访问内容是空的 5.添加配置内容2 6.复制需要配置的网络二级URL 7 ...

  3. C# 关机/重启/注销计算机

    一.调用 shutdown.exe 执行操作 调用 shutdown.exe 执行计算机关机.重启.注销操作,还可以设置多长时间后执行操作,代码如下: 1 /// <summary> 2 ...

  4. SQL -去重Group by 和Distinct的效率

    经实际测试,同等条件下,5千万条数据,Distinct比Group by效率高,但是,这是有条件的,这五千万条数据中不重复的仅仅有三十多万条,这意味着,五千万条中基本都是重复数据. 为了验证,重复数据 ...

  5. Windows环境下搭建FTP服务器

    Windows主机建立FTP服务器 第一步:启用对应的Windows功能 控制面板 选择启用或关闭Windows功能 勾选FTP服务器和Web管理工具 可能出现的问题 系统提示无法安装IIS和FTP服 ...

  6. 前端面试准备笔记之JavaScript(04)

    01. DOM的本质 xml是一种可扩展的标记性语言,可扩展就是可以描述任何结构的数据,他是一棵树,可以自定义标签,可以自己扩展. html也是一种特定的xml,他规定了一些标签的名称,结构与xml是 ...

  7. 为了更好的多线程性能，在对象创建或者更新时，若数据大于2047字节则 Python 的 GIL 会被释放。 执行计算密集型任务如压缩或哈希时释放 GIL

    hashlib - Secure hashes and message digests - Python 3.8.3 documentation https://docs.python.org/3.8 ...

  8. https://www.cnblogs.com/AloneSword/p/3209653.html

    proc/sys/net/ipv4/下各项的意义 - 孤剑 - 博客园 https://www.cnblogs.com/AloneSword/p/3209653.html

  9. Flash图解线程池 | 阿里巴巴面试官希望问的线程池到底是什么？

    前言 前几天小强去阿里巴巴面试Java岗,止步于二面. 他和我诉苦自己被虐的多惨多惨,特别是深挖线程和线程池的时候,居然被问到不知道如何作答. 对于他的遭遇,结合他过了一面的那个嘚瑟样,我深表同情(加 ...

  10. Java面试（解答题一）

    1.简述下列问题 List,set,map的区别 解答:List,Set都是继承自Collection接口,Map则不是: List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素 ...