了解 webpack 的 hash、chunkhash、contenthash
【摘要】 一、前言hash代表compilation的hash值。compilation在项目任何一个文件改动后就会被重新创建,然后webpack计算新的compilation的hash值。chunkhash 代表chunk的hash,模块发生改变才会重新生成hash。contenthash 解决改变style文件导致js文件重新生成hash的问题(使用extract-text-webpack-pl...
一、前言
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,js
filename: 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 file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)