webpack中hash与chunkhash区别和需要注意的问题
项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash
和 chunkhash
等。
问题一:hash问题
- 使用
hash
对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存 - 原因是因为,
hash
字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的。(所以每一次编译都会有一个新的hash,并不适用) - 解决:不用hash,而用
chunkhash
(js和css要使用chunkhash),chunkhash
的话每一个js的模块对应的值是不同的(根据js里的不同内容进行生成)
问题二:图片和字体图标的chunkhash问题
- 前面有提到,hash在js和css中不实用,所以在项目中所有的文件都准备用
chunkhash
,但是又有了新的问题-img和font等资源中,使用chunkhash
会报错 - 解决:因为
chunkhash
只适用于js和css,img中是没有这种东西的,仍然需要用到hash
(这个hash有点区别,每一个资源本身有自己的hash)
问题三:chunkhash重复问题
- 打包时发现,js和js引入的css的
chunkhash
是相同的,导致无法区分css和js的更新,如下
index2-ddcf83c3b574d7c94a42.css
index2-ddcf83c3b574d7c94a42.js
- 原因是因为webpack的编译理念,webpack将css视为js的一部分,所以在计算chunkhash时,会把所有的js代码和css代码混合在一起计算 *解决:css是使用
ExtractTextPlugin
插件引入的,这时候可以使用到这个插件提供的contenthash
,如下(使用后css就有独立于js外的指纹了),
//提取css文件
new ExtractTextPlugin({
filename:'css/[name].[chunkhash:8].css' //提取chunkhash8位码
})
- 需要注意的是,在新版本中,我在webpack3中测试的是,修改css的内容并不会引起js中的
chunkhash
变动(原因估计是webpack内置的算法变为了只计算js chunk),所以css请务必使用contenthash
,否则修改后无法生成新的签名,而是会覆盖以前的资源
转:http://blog.csdn.net/sinat_17775997/article/details/61924901
webpack中hash与chunkhash区别和需要注意的问题的更多相关文章
- webpack中hash、chunkhash、contenthash区别
webpack中对于输出文件名可以有三种hash值: 1. hash 2. chunkhash 3. contenthash 这三者有什么区别呢? hash 如果都使用hash的话,因为这是工程级别的 ...
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
文件的hash指纹通常作为前端静态资源实现增量更新的方案之一,Webpack是目前最流行的开源编译工具之一,其强大的功能也带来很多坑(当然,大部分麻烦其实都可以在官方文档中找到答案). 比如,在Web ...
- Webpack中hash、chunkhash和contenthash三者的区别
在webpack中有三种的方式生成哈希值,分别为hash.chunkhash和contenthash.这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值.那为什么 ...
- webpack中 hash chunkhash
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容发生改变的话,那么对应文件hash值也会改变,对应的HTML引用的URL地址也会改变, ...
- 详解webpack中的hash、chunkhash、contenthash区别
hash.chunkhash.contenthash hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会 ...
- Vue-router 中hash模式和history模式的区别
实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...
- [转]webpack中require和import的区别
webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- Vue中hash模式和history模式的区别
vue-router 中hash模式和history模式. 在vue的路由配置中有mode选项,最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ,而history模式下没有.vue默 ...
随机推荐
- CSS常用属性计算原理
absolute: left.right/top.bottom 的百分比值分别根据父元素的 wdith / height 计算 margin: top /right / bottom/ left 的百 ...
- Go语言极速入门手册
Github: https://github.com/coderzh/CodeTips /* gotips_test.go: Golang速学速查速用代码手册 Source: github.com/c ...
- Java经典编程题50道之四十三
一个偶数总能表示为两个素数之和. public class Example43 { public static void main(String[] args) { f(); ...
- NoSQL性能测试工具YCSB-Running a Workload
写在前面 目前,在系统设计中引入了越来越多的NoSQL产品,例如Redis/ MongoDB/ HBase等,其中性能指标往往会成为权衡不同NoSQL产品的关键因素.对这些产品在性能表现和产品选择上的 ...
- POJ - 1182 食物链 并查集经典
思路:设r(x)表示节点x与根结点的关系,px表示x的根结点.记录每个节点与其父节点的关系,就能很方便知道每个节点以及和它的父节点的关系. struct node{ int par; //父亲节点 i ...
- 动态添加数据源,根据用户登录切换数据库.编程式Spring事务.
根据用户注册,系统自动创建私有数据库,用户登录,动态添加数据源到Spring数据路由,Session超时删除数据源 好处:当数据量大的时候,类似水平切割效果,效率会高一些 坏处:数据源切换,Sprin ...
- MySQL之pymysql模块
MySQL之pymysql模块 import pymysql #s链接数据库 conn = pymysql.connect( host = '127.0.0.1', #被连接数据库的ip地址 po ...
- react-dom.js 源码
/** *以下这是 react-dom.js 的源代码 * ReactDOM v15.3.1 * * Copyright 2013-present, Facebook, Inc. * All righ ...
- rpm检验是否被改动过
参考原文http://vbird.dic.ksu.edu.tw/linux_basic/0520rpm_and_srpm.php#rpmmanager_verify rpm -qVa (当然可 ...
- linux 时间和日期的设置
Linux机器上的时间比较复杂,有各式各样的时钟和选项等等.机器里有两个时钟,硬件时钟从根本上讲是CMOS时钟,而系统时钟是由内核维护的. 1. 修改硬件时钟 (1)更新机器的硬件时间.命令为:hwc ...