webpack打包的3種hash值詳解
前言
大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎(chǔ)是進階的前提是我的初心
當年的校招
依稀記得,當年我參加了大廠的校招,面試的是網(wǎng)易雷火工作室,當時有一道題,我記得很清楚,就是:說說webpack中三種hash配置的區(qū)別
哈哈,我當時連webpack都不太會配置,所以也答不出來,然后也。。。沒有然后了。。
哪三種?
webpack中的三種hash分別是:
- hash:全局hash
- chunkhash:分組hash
- contenthash:內(nèi)容hash
實踐講解
事先準備
準備三個文件:
- main.js
import './main.css' console.log('我是main.js')
- console.js
console.log('我是console.js')
- main.css
.title { color: #000; }
打包環(huán)境搭建
打包環(huán)境的搭建我就不在這里詳細講了,想看的之后我會出一篇文章專門講解。這里我就抽取精華部分。
- webpack.config.js
// 多入口打包 entry: { main: './src/main.js', console: './src/console.js' }, // 輸出配置 output: { path: path.resolve(__dirname, './dist'), // 這里預設(shè)為hash filename: 'js/[name].[hash].js', clean: true }, plugins: [ // 打包css文件的配置 new MiniCssExtractPlugin({ // 這里預設(shè)為hash filename: 'styles/[name].[hash].css' }) ]
hash
由于我們預設(shè)的是hash,所以我們直接運行打包npm run build,我們看看我們打包后的是什么東西
可以看到,所有文件的文件名hash值都是一致的,那我們現(xiàn)在改一下main.css這個文件
.title { // #000 改成 #fff color: #fff; }
然后我們再運行npm run build打包,看看打包后的是什么東西:
可以看出,修改一個文件,所有文件的hash值跟著變
結(jié)論:牽一發(fā)動全身,只改了一個main.css,會導致打包后所有文件的hash值都改變。所以當打包名稱設(shè)置為hash時,整個項目文件是一致的,修改其中一個會導致所有跟著一起改。
chunkhash
我們把輸出文件名規(guī)則修改為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值會根據(jù)入口文件的不同而分出兩個陣營:
- main.js、main.css一個陣營,都屬于main.js入口文件
- console.js一個陣營,屬于console.js入口文件
那我們現(xiàn)在照樣修改一下main.css:
.title { // 從 #fff 改為 pink color: pink; }
重新運行npm run build打包看看:
可以看出,main.css修改后會影響main.css、main.js的hash值
結(jié)論:當規(guī)則為chunkhash時,打包后的hash值會根據(jù)入口文件的不用而不一樣,當某個入口文件修改后重新打包,會導致本入口文件關(guān)聯(lián)的所有文件的hash值都修改,但是不會影響到其他入口文件的hash值
contenthash
我們把輸出文件名規(guī)則修改為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值都是根據(jù)自身的內(nèi)容去生成的,那我們現(xiàn)在修改一下main.css:
.title { // pink 修改為 blue color: blue; }
重新打包看看:
可以看出,main.css修改后只會影響main.css得hash值,也就是自己的hash值
結(jié)論:當規(guī)則為contenthash時,每個文件的hash值都是根據(jù)自身內(nèi)容而生成,當某個文件內(nèi)容修改時,打包后只會修改其本身的hash值,不會影響其他文件的hash值
以上就是webpack打包的3種hash值詳解的詳細內(nèi)容,更多關(guān)于webpack打包hash值的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計和難點
本文講如何在網(wǎng)頁端實現(xiàn)一個仿微信的聊天窗口界面, 以及其中涉及到的一些技術(shù)點. 對gameboy闖關(guān)游戲相關(guān)知識感興趣的朋友參考下2016-02-02javascript動態(tài)設(shè)置樣式style實例分析
這篇文章主要介紹了javascript動態(tài)設(shè)置樣式style的方法,實例分析了javascript操作style樣式的易錯點和相關(guān)使用技巧,需要的朋友可以參考下2015-05-05Makefile/cmake/node-gyp中區(qū)分判斷不同平臺的方法
今天小編就為大家分享一篇關(guān)于Makefile/cmake/node-gyp中區(qū)分判斷不同平臺的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2018-12-12