以vue-cli為例，瞭解webpack的hash、chunkhash、contenthash

kkxiaojun發表於2019-03-13
VueWeb

hash

[hash] is replaced by the hash of the compilation（）. 代表的是cpmpilation的hash。

compilation在專案中任何一個檔案改動後就會被重新建立，然後webpack計算新的compilation的hash值，這個hash值便是hash。

chunkhash

[chunkhash] is replaced by the hash of the chunk. chunk（模組）的hash

代表的是chunk(模組)的hash值。

contenthash

外掛extract-text-webpack-plugin引入的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的配置檔案hash, 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,build/webpack.prod.conf.js

chuunkhash主要用於js檔案中

// chunkhash,js
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
複製程式碼

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')
    }),
複製程式碼

至於快取這一大塊的內容，路漫漫，繼續學習

參考資料

相關文章