hash、contenthash、chunkhash是经过哈希函数处理后生成的一串字符，可以用来区分文件。文件名没有hash值在webpack.config.js文件中，output中定义了输出js文件的名称，plugins中定义了提取的css文件名constMiniCssExtractPlugin=require('mini-css-extract-plugin');module.exports={//部分配置省略entry:{index:'./src/index.js',main:'./src/main.js',},output:{filename:'[name].js',path:path.resolve(__dirname,"./dist"),},插件:[newMiniCssExtractPlugin({filename:'./[name].css',}),],};在index.js中使用axios发送请求，将index.css资源src引入main.js├─index.css├─index.js└─编译完main.js之后，虽然我们定义的css文件的名字是index.css,被main.js引入，所以打包后的文件名变成了main.css。559.js是单独打包的第三方库axios。每次编译后，生成的文件名都是一样的，所以会出现一个问题，webpack编译生成的静态文件会被我们放在服务器上，当编译文件更新时，由于设置的缓存策略浏览器或服务器，同名文件可能不会立即更新，导致用户访问的仍然是上一个版本。hash为了解决这个问题，我们通常会在文件名中加上一些哈希值，以保证当文件更新时，浏览器会重新下载该资源。这里使用占位符hashmodule.exports={//部分配置省略output:{filename:'[name]_[hash].js',path:path.resolve(__dirname,"./dist"),},插件:[newMiniCssExtractPlugin({filename:'./[name]_[hash].css',}),],};这时候js和css文件都添加了一个hash值相同的字符串。当项目中没有文件发生变化时，无论怎么重新编译，文件哈希值都不会改变。但是这个时候，如果改变index.js文件，加上一个输出语句，那么所有文件的hash值都会同时改变。所有文件的hash值都变了，所以即使只更新一个文件，也需要重新加载所有资源，有点浪费性能。chunkhash在这里是一个多入口项目。只有index.js条目发生了变化。如果不想修改main.js入口文件，可以使用占位符chunkhash来解决。另外hash值比较长，截取了八位显示。.module.exports={//省略部分配置output:{filename:'[name]_[chunkhash:8].js',path:path.resolve(__dirname,"./dist"),},plugins:[newMiniCssExtractPlugin({filename:'./[name]_[chunkhash:8].css',}),],};可以看到同一个chunk打包出来的hash值是一样的。当修改css文件时，只有同一个chunk的main.js和main.css文件的hash值发生了变化。css文件在main.js块中，但是main.js本身没有任何修改，所以不需要重新加载。contenthash在同一个chunk中，部分文件修改导致所有文件的hash值发生变化的问题，可以使用contenthash来解决。contenthash只与每个文件的内容有关。如果内容发生变化，将重新生成哈希值。module.exports={//省略部分配置output:{filename:'[name]_[contenthash:8].js',path:path.resolve(__dirname,"./dist"),},plugins:[newMiniCssExtractPlugin({filename:'./[name]_[contenthash:8].css',}),],};每个文件生成的哈希值是不同的。在main.js中添加一行输出并导入css内容没有改变，css文件没有改变hash。小结webpack中生成hash值规则的方式有3种，可以用来区分一个文件是否被修改过。哈希关系到整个项目。如果项目中有文件修改，所有文件的哈希值都会改变。chunkhash与条目相关。同一条目的文件被视为一个整体。当其中一个文件被修改时，具有相同条目的所有文件的哈希值都会发生变化。contenthash只和文件的内容有关，只有文件内容改变，文件的hash值才会改变。利用好文件的哈希值，解决浏览器缓存导致资源更新不及时的问题。以上就是webpack中hash、chunkhash和contenthash的介绍。更多关于webpack的内容可以参考我的其他博文，正在更新中~
