龙空技术网

Vue进阶(七十):了解webpack的hash

Web全栈开发攻城狮 178

前言:

如今同学们对“哈希css”可能比较注重,兄弟们都需要了解一些“哈希css”的相关资讯。那么小编同时在网上汇集了一些有关“哈希css””的相关文章,希望小伙伴们能喜欢,姐妹们快快来了解一下吧!

hash代表compilation hash值。compilation在项目中任何一个文件改动后就会被重新创建,然后webpack计算新的compilation hash值。chunkhash 代表chunk hash,模块发生改变才会重新生成hashcontenthash 解决改变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')}),

标签: #哈希css