Vue 进阶（七十）：了解 webpack 的 hash、chunkhash、contenthash

No Silver Bullet

关注

发布于: 2021 年 08 月 26 日

Vue进阶（七十）：了解 webpack 的 hash、chunkhash、contenthash

一、前言

hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建，然后webpack计算新的compilation的hash值。
chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。
contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-plugin单独编译输出css文件)。

二、vue-cli 举例

vue-cli脚手架中webpack配置文件 build/webpack.base.conf.js

vue-cli中，hash用于图片，音视频，和字体文件。

// hash(hash,jpg,mo4,txt){test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}){test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('img/[name].[hash:7].[ext]')}},{test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('media/[name].[hash:7].[ext]')}},{test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,loader: 'url-loader',options: {    limit: 10000,    name: utils.assetsPath('fonts/[name].[hash:7].[ext]')}}

复制代码

chunkhash主要用于js文件中

// chunkhash,jsfilename: utils.assetsPath('js/[name].[chunkhash].js'),chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')

复制代码

注：

chunkhash只能用在生产环境不能用在开发环境。
去掉热更新，不要让webpack.HotModuleReplacementPlugin()在plugins里运行,热更新与js的chunkhash有冲突。

contenthash：build/webpack.prod.conf.js

使用extract-text-webpack-plugin单独编译输出css文件。extract-text-webpack-plugin提供了另外一种hash值：contenthash

// extract css into its own filenew ExtractTextPlugin({  filename: utils.assetsPath('css/[name].[contenthash].css')}),

复制代码

发布于: 2021 年 08 月 26 日阅读数: 5

原文链接:【http://xie.infoq.cn/article/0e9aacec1deb12e46d7c96813】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（七十）：了解 webpack 的 hash、chunkhash、contenthash

一、前言

二、vue-cli 举例

No Silver Bullet

评论