【Webpack|青训营笔记】

39 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 14天。以下是我在观看学习视频的同时进行的笔记记录,今天学习了好多新知识,感觉好充实!同时也希望大佬们进行补充和改正,大家一起加油努力呀!(接上文)

webpack中hash、chunkhash和contenthash的区别

Webpack通过对文件进行hash算法获得的hash值,除了有hash,还有chunkhash和contenthash,那么这三者有什么不同呢?

首先,hash、chunkhash和contenthash这三者都是根据文件内容计算出的hash值,只是它们所计算的文件不一样。

hash是根据打包中所有的文件计算出的hash值。在一次打包中,所有出口文件的filename获得的[hash]都是一样的。

chunkhash是根据打包过程中当前chunk计算出的hash值。如果Webpack配置是多入口配置,那么通常会生成多个chunk,每个chunk对应的出口filename获得的[chunkhash]是不一样的。这样可以保证打包后每一个JS文件名都不一样。 小结 Webpack中hash、chunkhash和contenthash主要与浏览器缓存行为有关。浏览器在初次请求服务端资源的时候,服务器给JS、CSS和图片等资源一个较长的缓存时间,我们通过给资源名称增加hash值来控制浏览器是否继续使用本地缓存。hash、chunkhash和contenthash这三者都是根据文件内容计算出的hash值,[hash]是根据全部参与打包的文件计算出来的,[chunkhash]是根据当前打包的chunk计算出来的,[contenthash]是CSS文件的。

Loader

预处理器loader本质是一个函数,它接受一个资源模块,然后将其处理成Webpack核心能使用的形式。

在Webpack中,一切皆模块。Webpack在进行打包的时候,对所有引入的资源文件,都当作模块来处理。

现在的Webpack,自身可以处理JS和JSON文件模块,它无法理解其它类型的文件模块。