欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack打包的3種hash值詳解

 更新時間:2022年07月06日 15:50:03   作者:Sunshine_Lin  
這篇文章主要為大家介紹了webpack打包的3種hash值詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

前言

大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎(chǔ)是進(jìn)階的前提是我的初心

當(dāng)年的校招

依稀記得,當(dāng)年我參加了大廠的校招,面試的是網(wǎng)易雷火工作室,當(dāng)時有一道題,我記得很清楚,就是:說說webpack中三種hash配置的區(qū)別

哈哈,我當(dāng)時連webpack都不太會配置,所以也答不出來,然后也。。。沒有然后了。。

哪三種?

webpack中的三種hash分別是:

  • hash:全局hash
  • chunkhash:分組hash
  • contenthash:內(nèi)容hash

實踐講解

事先準(zhǔn)備

準(zhǔn)備三個文件:

  • main.js
import './main.css'

console.log('我是main.js')
  • console.js
console.log('我是console.js')
  • main.css
.title {
  color: #000;
}

打包環(huán)境搭建

打包環(huán)境的搭建我就不在這里詳細(xì)講了,想看的之后我會出一篇文章專門講解。這里我就抽取精華部分。

  • webpack.config.js
// 多入口打包
entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
// 輸出配置
output: {
    path: path.resolve(__dirname, './dist'),
    // 這里預(yù)設(shè)為hash
    filename: 'js/[name].[hash].js',
    clean: true
  },
plugins: [
      // 打包css文件的配置
      new MiniCssExtractPlugin({
      // 這里預(yù)設(shè)為hash
      filename: 'styles/[name].[hash].css'
    })
]

hash

由于我們預(yù)設(shè)的是hash,所以我們直接運行打包npm run build,我們看看我們打包后的是什么東西

可以看到,所有文件的文件名hash值都是一致的,那我們現(xiàn)在改一下main.css這個文件

.title {
  // #000 改成 #fff
  color: #fff;
}

然后我們再運行npm run build打包,看看打包后的是什么東西:

可以看出,修改一個文件,所有文件的hash值跟著變

結(jié)論:牽一發(fā)動全身,只改了一個main.css,會導(dǎo)致打包后所有文件的hash值都改變。所以當(dāng)打包名稱設(shè)置為hash時,整個項目文件是一致的,修改其中一個會導(dǎo)致所有跟著一起改。

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é)論:當(dāng)規(guī)則為chunkhash時,打包后的hash值會根據(jù)入口文件的不用而不一樣,當(dāng)某個入口文件修改后重新打包,會導(dǎo)致本入口文件關(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é)論:當(dāng)規(guī)則為contenthash時,每個文件的hash值都是根據(jù)自身內(nèi)容而生成,當(dāng)某個文件內(nèi)容修改時,打包后只會修改其本身的hash值,不會影響其他文件的hash值

以上就是webpack打包的3種hash值詳解的詳細(xì)內(nèi)容,更多關(guān)于webpack打包hash值的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計和難點

    gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計和難點

    本文講如何在網(wǎng)頁端實現(xiàn)一個仿微信的聊天窗口界面, 以及其中涉及到的一些技術(shù)點. 對gameboy闖關(guān)游戲相關(guān)知識感興趣的朋友參考下
    2016-02-02
  • js實現(xiàn)簡單的點名器隨機(jī)色實例代碼

    js實現(xiàn)簡單的點名器隨機(jī)色實例代碼

    這篇文章主要給大家介紹了關(guān)于js實現(xiàn)簡單的點名器隨機(jī)色的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • Bootstrap基本插件學(xué)習(xí)筆記之按鈕(21)

    Bootstrap基本插件學(xué)習(xí)筆記之按鈕(21)

    這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之按鈕的相關(guān)資料,實現(xiàn)按鈕狀態(tài)控制等形式的交互,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • javascript比較兩個日期相差天數(shù)的方法

    javascript比較兩個日期相差天數(shù)的方法

    這篇文章主要介紹了javascript比較兩個日期相差天數(shù)的方法,涉及javascript針對日期的轉(zhuǎn)換與數(shù)學(xué)運算相關(guān)技巧,非常簡單實用,需要的朋友可以參考下
    2015-07-07
  • js購物車實現(xiàn)思路及代碼(個人感覺不錯)

    js購物車實現(xiàn)思路及代碼(個人感覺不錯)

    提起購物車想必只有在一些購物網(wǎng)站上才可以看得到,下面為大家介紹下使用js實現(xiàn)的購物車,感興趣的朋友可以參考下
    2013-12-12
  • javascript動態(tài)設(shè)置樣式style實例分析

    javascript動態(tài)設(shè)置樣式style實例分析

    這篇文章主要介紹了javascript動態(tài)設(shè)置樣式style的方法,實例分析了javascript操作style樣式的易錯點和相關(guān)使用技巧,需要的朋友可以參考下
    2015-05-05
  • 使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)

    使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)

    這篇文章主要介紹了使用原生js封裝webapp滑動效果,具有慣性滑動、滑動回彈功能,需要的朋友可以參考下
    2014-05-05
  • javascript單例模式與策略模式實例詳解

    javascript單例模式與策略模式實例詳解

    這篇文章主要介紹了javascript單例模式與策略模式,結(jié)合實例形式詳細(xì)分析了javascript單例模式與策略模式基本概念、功能、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下
    2023-06-06
  • JavaScript中的this指向問題詳解

    JavaScript中的this指向問題詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript中this指向問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Makefile/cmake/node-gyp中區(qū)分判斷不同平臺的方法

    Makefile/cmake/node-gyp中區(qū)分判斷不同平臺的方法

    今天小編就為大家分享一篇關(guān)于Makefile/cmake/node-gyp中區(qū)分判斷不同平臺的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧
    2018-12-12

最新評論