Vue进阶（七十）：以vue-cli为例，了解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]')
}
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
 

chunkhash主要用于js文件中

// chunkhash,js
filename: utils.assetsPath(‘js/[name].[chunkhash].js’),
chunkFilename: utils.assetsPath(‘js/[id].[chunkhash].js’)

注：

1. chunkhash只能用在生产环境不能用在开发环境。
2. 去掉热更新，不要让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 file
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
}),

  

 

  
1
  
2
  
3
  
4
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/100629234