苏南大叔在本文中,将要认真识别一下webpack中出现的三个相似概念,分别是hashchunkhashcontenthash。当然,如果您赶时间,也可以直接跳到文末看结论,中间的分析过程就可以略过了。

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-hero
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0

配置中的name

webpack.config.js中,有很多和文件打交道的地方。在这些地方,都可以自定义文件的名称和路径。在实际的生产过程中,通常会在文件名称里面,加入hash的概念。例如:

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-js
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-2)

  • 处理js的时候:
output: {
    filename: 'js/[name].[hash:8].bundle.js',
    path: path.resolve(__dirname, 'dist'),
},

相关链接:* https://newsn.net/say/webpack-start.html

  • 处理css的时候:
new MiniCssExtractPlugin({
    filename: 'css/[name].[hash:8].css',
}),

相关链接:* https://newsn.net/say/webpack-css.html

  • 处理图片的时候:
{
    test: /\.(png|jpg|gif|jpeg|svg)$/,
    use: [{
        loader: "url-loader",
        options: {
            name: "[name].[hash:5].[ext]",
            limit: 1024, // size <= 1kib
            outputPath: "img",
            esModule: false
        }
    }]
},

相关链接: * https://newsn.net/say/webpack-html-loader-ok.html

  • 处理字体的时候:
{
    test: /\.(eot|woff|woff2?|ttf|svg)$/,
    use: [{
        loader: "url-loader",
        options: {
            name: "fonts/[name]-[hash:5].[ext]",
            limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
        }
    }]
},

相关链接: * https://newsn.net/say/webpack-font.html

  • 处理视频文件的时候:
{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
    loader: 'url-loader',
    query: {
        limit: 1024000, //1000kb
        name: 'video/[name].[hash:5].[ext]',
        esModule: false
    }
},

相关链接: * https://newsn.net/say/webpack-video.html

hash的概念

在本文中,苏南大叔既然提出了三个不同的hash概念,那么,他们就肯定是不一样的。不如来看一下,使用webpack的构建结果吧:

  • 所有的都使用hash,结果是这样的:

所有的jscss文件,得到了相同的hash值,而所有的图片、视频、字体文件,彼此之间是不同的hash

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-1
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-3)

  • js使用chunkhashcss使用hash:

js文件得到了不同的hashcss文件之间是相同的hash

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-2
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-4)

  • js使用chunkhashcss使用chunkhash:

js文件得到了不同的hashcss文件之间是不同的hash。但是,这个时候,js文件和他所引入的css文件之间存在着一对一的对应关系。修改js文件而不修改对于css文件的时候,jscss文件的hash同时发生相同改变。

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-3
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-5)

  • js使用chunkhashcss使用contenthash,或者两者都使用contenthash:

js文件和css文件,彼此之间没有关系。彼此之间hash不同,js内容变化,不影响csshash值。

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-4
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-6)

  • 图片、字体、视频等使用chunkhash:

直接报错。

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-5
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-7)

  • 图片、字体、视频等使用contenthash:

和使用hash的效果一致,数值不变。

苏南大叔:webpack4系列教程,对比识别hash/chunkhash/conenthash - webpack-hash-6
webpack4系列教程,对比识别hash/chunkhash/conenthash(图8-8)

解决方案

最终的结论就是这样的:

newsn.net:这里是【评论】可见内容

contenthash是万能的!

相关链接

总结

如果您那边没有太变态的需求的话,都使用hash是没有问题的。但是如果涉及到页面性能性能之类的需求的话,就会要求:如何内容没有变化的话,文件名也不能发生变化。那么,您就可能需要本文的内容了。直接拿走结论,不用谢。

更多的webpack内容,请直接点击下面的链接:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: