webpack4系列教程，对比识别hash/chunkhash/conenthash

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

本文测试环境：win10、node@14.2.0、npm@6.14.4、webpack@4.43.0。

配置中的name

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

• 处理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，结果是这样的：

所有的js和css文件，得到了相同的hash值，而所有的图片、视频、字体文件，彼此之间是不同的hash。

• js使用chunkhash，css使用hash:

js文件得到了不同的hash，css文件之间是相同的hash。

• js使用chunkhash，css使用chunkhash:

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

• js使用chunkhash，css使用contenthash，或者两者都使用contenthash:

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

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

直接报错。

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

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

解决方案

最终的结论就是这样的：

contenthash是万能的！

相关链接

• https://newsn.net/say/webpack-start.html
• https://newsn.net/say/webpack-css.html
• https://newsn.net/say/webpack-font.html
• https://newsn.net/say/webpack-html-loader-ok.html
• https://newsn.net/say/webpack-video.html

总结

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

更多的webpack内容，请直接点击下面的链接：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。