深入了解webpackhash

一、什么是webpackhash

webpack是一个模块打包工具，可以将多个模块打包成一个文件，同时还可以做很多优化操作，webpackhash在webpack中起着非常重要的作用，它是webpack生成的唯一hash值。Webpack在构建时，会为每个文件生成一个hash值，用于唯一标识该文件，同时也可以做文件是否改变的判断。webpackhash根据所有的入口文件、模块的内容和webpack的配置信息生成，这意味着当有任何一个内容发生更改时，webpackhash就会发生变化，而且一旦hash值确定下来，就会被使用在所有的构建文件中。

二、webpackhash的用途

1、文件缓存

webpackhash的唯一性可以用来实现文件缓存，因为它会根据文件内容和webpack配置生成不同的hash值，在文件内容改变时，hash值也会发生变化，从而在使用浏览器缓存文件时，可以强制浏览器重新请求新的文件。我们可以将webpackhash添加到文件名中，这样就可以在文件内容改变时自动更新文件名称，从而达到强制浏览器重新请求的目的。

例如：

output: {
    filename: 'bundle.[hash].js'
}

2、多入口文件

webpack支持多入口文件，在配置多个入口文件时，需要考虑到文件打包后的文件名，可以使用webpackhash来解决这个问题。

例如：

entry: {
    app: './src/index.js',
    vendors: './src/vendors.js'
},
output: {
    filename: '[name].[hash].js'
}

3、CDN缓存

对于一些第三方库，我们可能会引用CDN资源，但CDN资源的缓存时间较长，如果发布新版本，需要强制刷新CDN缓存。可以使用webpackhash作为版本号，可以实现CDN强制刷新。

三、webpackhash的缺点

1、文件内容改变次数较多时，webpackhash会变得非常长。如果使用的是默认配置，webpack生成文件名和每个模块的唯一标识码，当你的项目里有大量的chunk或者长期不更改时，webpackhash会变长，并且给版本管理带来很大的负担。

2、webpackhash不是真正意义上的唯一标识，因为webpackhash是根据文件内容和webpack配置生成的，如果你的配置更改了，生成的hash也会变化。

四、webpackhash的配置

webpackhash可以通过webpack的配置进行配置，webpack有三种hash可以选择：chunkhash、contenthash和hash。

1、chunkhash

chunkhash是根据内容生成的hash值，只要文件内容不变，chunkhash就不会变。chunkhash适用于解决缓存问题，但必须在每次构建之后都要更改文件名。chunkhash只能用于非公共模块。

例如：

output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
}

2、contenthash

contenthash是根据文件内容生成的hash值，只有在文件内容发生变化时，才会变化。contenthash适用于不改变文件的文件名，但需要解决文件内容缓存问题。

例如：

output: {
    filename: '[name].[contenthash].js',
}

3、hash

hash是每次构建都会生成的hash值，其生成依赖于webpack的全局配置，只要其中任何一个配置发生了变化，hash就会发生变化。

例如：

output: {
    filename: '[name].[hash].js',
}

总结

webpackhash作为webpack生成的唯一hash值，在文件缓存、多入口文件、CDN缓存等方面有着非常重要的作用。但是也需要注意它的缺点，特别是文件内容改变次数较多时，会导致hash值变得非常长。