Webpack之 hash、 chunkhash 、 contenthash

一、背景

对于Webpack的output属性，大家都知道可以配置文件的输出名称。一般来说，默认的配置都是这样：

output: {
   
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
}

翻看官方文档，我们发现hash 还可以替换为 chunkhash，那么这些到底有什么区别？对于我们的意义又是什么？

我们知道，浏览器为了优化体验，会有缓存机制。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接使用本地资源。在webpack的构建中，我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变的lib包中来解决新资源缓存问题。

二、过程

我们在webpack构建中通过配置filenames来决定输出的文件名，比如我们的配置如下

entry: {
   
    main: './src/index.js'