webpack中hash、chunkhash、contenthash的区别

项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存 原因是因为, hash 字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的.(所以每一次编译都会有一个新的hash,并不适用) 解决:不用hash,而用 chunkhash (js和css要使用chunkhash), ch

这三个hash值都是webpack在打包的时候根据内部算法生成的一串字符串,总的来说最大的不同就是其囊括控制的范围大小不同,对应的控制颗粒度不同. hash hash是对webpack整个一次构建而言,在webpack构建中,文件都会带上对应的MD5值,构建生成的文件hash值都是一样的.如果出口是hash,那么一旦针对项目中任何一个文件的修改,都会构建整个项目,重新获取hash值.如果有目的性的缓存就会失败. chunkhash chunkhash的范围可以针对某个模块而言,它会从入口出发,对

现象: 测试提了一个bug,我完全复现不了,但是最吊诡的是在其他人的机器上都可以复现.起初以为是SVN合并后出现的冲突,后来经过对比法排查: step 1: 我本地开两个jetty,一个跑合并之前的版本,一个跑合并之后的版本,数据库.redis配置都一样的,结果一致,由此可以推测应该不是代码的问题. step 2: 我电脑和别人电脑同样的配置.连的一个数据库,同样的代码.同样的数据,得到了两个结果,我这里是正常的,而且除了我其它人都可以复现,我喵了狗.... 我还一度以为是灵异现象....o(╯

Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端

Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换.比如开发环境下用scss写样式, 想在浏览器中在线编辑css那样编辑scss就不是那么容易了.从我自己看过的资料中, sourcemap的概念最早出现在12年, jquer1.9是较早支持sourcemap的库.这篇博客比较有代表性:Introduction to JavaScript Sourc

Python中type与Object的区别 在查看了Python的API后,总算明白了.现在总结如下: 先来看object的说明: Python中关于object的说明很少,甚至只有一句话: class object The most base type 从介绍上看这也是Python对类型统一做出的努力.所以这里的object与Java的Object类有着异曲同工之妙,而且可以推测这个object很可能就是一个定义了一个类型的"空类" 再来看type的说明: class type(ob

webpack中涉及许多路径参数的配置.在此做个整理. context context是webpack编译时的基础目录,entry入口会相对于此目录查找. 若不配置,默认值是当前目录,webpack设置context.默认值代码: this.set("context", process.cwd()); 即webpack运行所在目录. context应该是绝对路径,假设入口是src/main.js,则可以设置 { context: path.resolve("./src&quo

java中set map list的区别: 都是集合接口 简要说明 set --其中的值不允许重复,无序的数据结构 list   --其中的值允许重复,因为其为有序的数据结构 map--成对的数据结构,健值必须具有唯一性(键不能同,否则值替换) List按对象进入的顺序保存对象,不做排序或编辑操作.Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序--否则应该使用List).Map同样对每个元素保存一份,但这是基于"键"的,Ma

比如我们可以看到一些css文件中有这样的代码: @import '~antd/dist/antd.css';... 那么,这个 ~ 起什么作用呢? 首先,我们来看一下URL转换规则 1.如果URL是一个绝对路径(例如 /images/foo.png),它将会保留不变. 2.如果URL以 . 开头,它会作为一个相对模块请求被解析且基于你的文件系统中的目录结构进行解析. 3.如果URL以 ~ 开头,其后任何的内容都会作为一个模块请求被解析.这意味着你甚至可以引用node模块中的资源: <img sr