webpack打包生成的文件中hash/chunkhash/contenthasn区别

1.开发环境 webpack

2.电脑系统 windows11专业版

3.在开发的过程中,我们或多或少的会接触webpack配置,下面我来分享一下在webpack打包中生成的文件名hash之间的区别。

4.表格简单描述:

类型	区别
hash	每次打包都会生成一个唯一的hash
chunkhash	根据每个chunk的内容来生成;chunk打包时,output.filename推荐使用chunkhas
contenthash	根据提取文件的内容生成的 hash;在使用 ExtractTextWebpackPlugin（webpack 3.x）或MiniCssExtractPlugin（webpack 4.x）时,使用 contenthash 提取出css部分代码到单独的css文件(比如:vue单文件组件中的style部分）

5.代码具体描述--->hash:

使用hash的缺点是假如我只改了其中一个文件,
但是所有文件的文件名里面的hash都是一样的。

这样会导致本来应该被浏览器缓存的文件,
强制要去服务器读取一遍,网络请求数变多了,页面加载有可能就变慢了,
用户体验就差了。

module.exports = {
  output: {
       filename: '[name]_[hash:8].js',
       path: path.resolve(__dirname, '../dist'),
   },
}

6.代码具体描述--->chunkhash:

chunkhash根据不同的入口文件(Entry)进行依赖文件解析、
构建对应的chunk，生成对应的哈希值。

在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,
接着我们采用chunkhash的方式生成哈希值,
那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。

module.exports = {
  output: {
       filename: '[name]_[hash:8].js',
       path: path.resolve(__dirname, '../dist'),
   },
}

//第一次打包

//第二次打包  修改了About文件