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