Open hubvue opened 5 years ago
当我们项目上线的时候,可能会经过多个版本的迭代。但是由于线上代码是有缓存的,如果迭代版本以上一个版本的文件名相同,则可能会导致即便我们上线了新功能而线上显示的还是老的功能,让我们的新特性无法展现。出于这个原因,在工程化过程中对文件根据某一规则得出hash值作为文件名,这样当版本迭代的时候,文件的hash值也会跟着发生变化就就可以去请求新代码而不使用旧代码。
hash的生成和整个项目的构建相关,所有模块的hash值相同,只要项目文件有修改,整个项目构建的hash就会更改。整个项目的构建过程是通过compiler和compilation来启动的,启动webpack会实例化出一个compiler实例,每次构建会生成一个compilation实例,hash的生成受到了compilation的影响。
注:hash的这种方式是不推荐的,因为所有的文件都会受到项目整体构建的影响,也就是说当只有一个文件变化的时候,其余的文件的hash也会跟着改变,很容易破坏线上缓存。
module.exports = { output: { path: resolve('dist'), filename: '[name]-[hash:8].js', }, }
在webpack中每一个入口文件会生成一个chunk,分包也会生成一个chunk,一个chunk是由多个module组合而成。chunkhash的生成就和webpack打包过程中生成的chunk有关,不同的chunk会生成不同的chunkhash。
module.exports = { output: { path: resolve('dist'), filename: '[name]-[chunkhash:8].js', }, }
注:chunkhash可以在JavaScript文件上使用,由webpack打包出来,一个chunk就代表着一个产出文件。
contenthash是根据文件的内容来定义hash值,当文件的内容改变的时候,hash值才会改变,当文件的内容不变的时候hash值不会发生变化。
注:contenthash可以在css文件上使用,css文件也会存在chunk中,一般构建都是需要把css文件分离处理。如果使用chunkhash的话,当JavaScript文件发生改变而css文件未发生改变的时候css文件同样会改变,因此使用contenthash让css文件根据自己的内容作出hash值,不会受到其它因素的影响。
module.exports = { plugins:[ new MiniCssExtractPlugin({ filename: '[name]_[contenthash:8].css' }), ] }
当使用file-loader解析图片的时候一般在filename上会使用[hash]来对图片资源做一个hash,这个hash和上面三种hash则不同,这个hash是纯粹通过MD5生成的
[hash]
module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader', options: { name: '[name]_[hash:8].[ext]', }, }, ], }, };
为什么要有文件指纹
当我们项目上线的时候,可能会经过多个版本的迭代。但是由于线上代码是有缓存的,如果迭代版本以上一个版本的文件名相同,则可能会导致即便我们上线了新功能而线上显示的还是老的功能,让我们的新特性无法展现。出于这个原因,在工程化过程中对文件根据某一规则得出hash值作为文件名,这样当版本迭代的时候,文件的hash值也会跟着发生变化就就可以去请求新代码而不使用旧代码。
hash
hash的生成和整个项目的构建相关,所有模块的hash值相同,只要项目文件有修改,整个项目构建的hash就会更改。整个项目的构建过程是通过compiler和compilation来启动的,启动webpack会实例化出一个compiler实例,每次构建会生成一个compilation实例,hash的生成受到了compilation的影响。
chunkhash
在webpack中每一个入口文件会生成一个chunk,分包也会生成一个chunk,一个chunk是由多个module组合而成。chunkhash的生成就和webpack打包过程中生成的chunk有关,不同的chunk会生成不同的chunkhash。
contenthash
contenthash是根据文件的内容来定义hash值,当文件的内容改变的时候,hash值才会改变,当文件的内容不变的时候hash值不会发生变化。
图片文件的hash
当使用file-loader解析图片的时候一般在filename上会使用
[hash]
来对图片资源做一个hash,这个hash和上面三种hash则不同,这个hash是纯粹通过MD5生成的