打包的3種hash值你知道嗎？當年我校招時被這題難倒了！

Sunshine_Lin發表於2022-02-05

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

當年的校招

依稀記得，當年我參加了大廠的校招，面試的是網易雷火工作室，當時有一道題，我記得很清楚，就是：說說webpack中三種hash配置的區別

哈哈，我當時連 webpack 都不太會配置，所以也答不出來，然後也。。。沒有然後了。。

哪三種？

webpack中的三種 hash 分別是：

  • hash ：全域性hash
  • chunkhash ：分組hash
  • contenthash ：內容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

我們把輸出檔名規則修改為 chunkhash ：

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值

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】

image.png

相關文章