webpack 的占位符[hash],[chunkhash],[contenthash] 有什么 区别和联系

15 阅读1分钟

1、[hash]:是整个项目的 hash 值,其根据每次编译内容计算得到,每次编译之后都会生成新的 hash,即修改任何文件都会导致所有文件的 hash 发生改变;在一个项目中虽然入口不同,但是 hash 是相同的,hash 无法实现前端静态资源在浏览器上长缓存,这时候应该使用 chunkhash

2、[chunkhash]:根据不同的入口文件(entry)进行依赖文件解析,构建对应的 chunk,生成相应的 hash,只要组成 entry 的模块文件没有变化,则对应 hash 也是不变的,所以一般项目优化时,会将公共代码库拆分到一起,因为公共代码库代码变动较少的,使用 chunkhash 可以发挥最长缓存的作用

3、[contenthash]:使用 chunkhash 存在一个问题,当在一个 js 文件引入 css 文件,编译后他们的 hash 是相同的,而且,只要 js 文件内容发生改变,与其关联的 css 文件 hash 也会改变,针对这种情况,可以把 css 从 js 中抽离出来并使用 contenthash