前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心
當年的校招
依稀記得,當年我參加了大廠的校招,面試的是網易雷火工作室,當時有一道題,我記得很清楚,就是:說說webpack中三種hash配置的區別
哈哈,我當時連 webpack
都不太會配置,所以也答不出來,然後也。。。沒有然後了。。
哪三種?
webpack中的三種 hash
分別是:
hash
:全域性hashchunkhash
:分組hashcontenthash
:內容hash
實踐講解
事先準備
準備三個檔案:
main.js
import './main.css' console.log('我是main.js')
console.js
console.log('我是console.js')
main.css
.title { color: #000; }
打包環境搭建
打包環境的搭建我就不在這裡詳細講了,想看的之後我會出一篇文章專門講解。這裡我就抽取精華部分。
webpack.config.js
// 多入口打包 entry: { main: './src/main.js', console: './src/console.js' }, // 輸出配置 output: { path: path.resolve(__dirname, './dist'), // 這裡預設為hash filename: 'js/[name].[hash].js', clean: true }, plugins: [ // 打包css檔案的配置 new MiniCssExtractPlugin({ // 這裡預設為hash filename: 'styles/[name].[hash].css' }) ]
hash
由於我們預設的是 hash
,所以我們直接執行打包 npm run build
,我們看看我們打包後的是什麼東西
可以看到,所有檔案的檔名hash值都是一致的,那我們現在改一下 main.css
這個檔案
.title {
// #000 改成 #fff
color: #fff;
}
然後我們再執行 npm run build
打包,看看打包後的是什麼東西:
可以看出,修改一個檔案,所有檔案的hash值跟著變
結論:牽一髮動全身,只改了一個main.css
,會導致打包後所有檔案的hash值都改變。所以當打包名稱設定為hash
時,整個專案檔案是一致的,修改其中一個會導致所有跟著一起改。
chunkhash
我們把輸出檔名規則修改為 chunkhash
:
entry: {
main: './src/main.js',
console: './src/console.js'
},
output: {
path: path.resolve(__dirname, './dist'),
// 修改為 chunkhash
修改 filename: 'js/[name].[chunkhash].js',
clean: true
},
plugins: [
new MiniCssExtractPlugin({
// 修改為 chunkhash
修改 filename: 'styles/[name].[chunkhash].css'
})
]
此時我們執行 npm run build
看看,打包後的東西:
我們可以看出,hash值會根據入口檔案的不同而分出兩個陣營:
main.js、main.css
一個陣營,都屬於main.js入口檔案console.js
一個陣營,屬於console.js入口檔案
那我們現在照樣修改一下 main.css
:
.title {
// 從 #fff 改為 pink
color: pink;
}
重新執行 npm run build
打包看看:
可以看出, main.css
修改後會影響 main.css、main.js
的hash值
結論:當規則為chunkhash
時,打包後的hash值會根據入口檔案的不用而不一樣,當某個入口檔案修改後重新打包,會導致本入口檔案關聯的所有檔案的hash值都修改,但是不會影響到其他入口檔案的hash值
contenthash
我們把輸出檔名規則修改為 contenthash
:
entry: {
main: './src/main.js',
console: './src/console.js'
},
output: {
path: path.resolve(__dirname, './dist'),
// 修改為 contenthash
修改 filename: 'js/[name].[contenthash].js',
clean: true
},
plugins: [
new MiniCssExtractPlugin({
// 修改為 contenthash
修改 filename: 'styles/[name].[contenthash].css'
})
]
執行 npm run build
打包,看看打包後的檔案長什麼樣子:
可以看到,每個檔案的hash值都不一樣,每個檔案的hash值都是根據自身的內容去生成的,那我們現在修改一下 main.css
:
.title {
// pink 修改為 blue
color: blue;
}
重新打包看看:
可以看出, main.css
修改後只會影響 main.css
得hash值,也就是自己的hash值
結論:當規則為contenthash
時,每個檔案的hash值都是根據自身內容而生成,當某個檔案內容修改時,打包後只會修改其本身的hash值,不會影響其他檔案的hash值
結語
我是林三心,一個熱心的前端菜鳥程式設計師。如果你上進,喜歡前端,想學習前端,那我們們可以交朋友,一起摸魚哈哈,摸魚群,加我請備註【思否】