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