webpack- hash chunkhash contenthash

Webpack里面有三种hash，分别是：hash, chunkhash, contenthash.在咱们尝试去区分他们仨以前，先来看看为何咱们须要hash。

一：为何咱们须要hash？

你们都知道咱们的浏览器会缓存咱们的文件。缓存是把双刃剑，好处是浏览器读取缓存的文件，能带来更佳的用户体验（不须要额外流量，速度更快）；坏处是有时候咱们修改了文件内容，可是浏览器依然读取缓存的文件（也就是旧文件），致使用户看到的文件不是最新的。

怎么解决上述的问题呢？通常就是咱们要主动告诉浏览器要不要读取缓存。举个例子，咱们的index.html文件里面引用了一个index.js文件，用户每次请求index.js会按照浏览器的缓存机制去决定要不要读取缓存。可是，若是是index.js?v=1，那么这种状况下，浏览器就不会去读取缓存，能保证此次请求必定是从服务器上读取的最新的index.js文件。

说回webpack，webpack提供一种在文件名里面嵌入hash的方式，每次打包都生成新的文件名，例如：

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    }
}

上面的代码，build以后，咱们可能会获得相似于：index.94f49d9b5ee809be277c.js 和 main.4afbc09e2f228ea4bc2f.js的文件。前面咱们说到，Webpack里面有三种hash，分别是：hash, chunkhash, contenthash，接下来咱们来看看三者的区别以及使用场景。

二：hash

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js',
    }
}

咱们执行npm run build以后获得：

你们从图上能够看到index.js和main.js文件的hash是同样的。hash是项目级别的，他的缺点是假如我只改了其中一个文件，可是全部文件的文件名里面的hash都是同样的。这样会致使原本应该被浏览器缓存的文件，强制要去服务器读取一遍，可是这个文件又和以前的旧文件并无区别，这样就很很差了。那能不能作到只有改变了文件，hash值才变，而没有改变的文件，文件名里面的hash值就不变呢？答案就是chunkhash。
三：chunkhash
chunkhash是针对entry的每个入口文件，独立的hash。若是entry里面的其中一个文件内容改变，只会改变这个入口文件build以后的文件名，而不会影响到其余文件。

const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    }
}

咱们执行一次npm run build,获得：

咱们改动一下./src/main.js文件的内容，可是不修改./src/index.js，再执行一次npm run build,获得：

对比以上2张图能够看出来index.js文件的hash值没有改变，可是main.js的hash值改变了。

四：contenthash