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')
}),
複製程式碼至於快取這一大塊的內容，路漫漫，繼續學習
參考資料