前言

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

當(dāng)年的校招

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

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

哪三種？

webpack中的三種hash分別是：

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

實(shí)踐講解

事先準(zhǔn)備

準(zhǔn)備三個(gè)文件：

• 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ì)講了，想看的之后我會(huì)出一篇文章專門講解。這里我就抽取精華部分。

• 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: [
      // 打包c(diǎn)ss文件的配置
      new MiniCssExtractPlugin({
      // 這里預(yù)設(shè)為hash
      filename: 'styles/[name].[hash].css'
    })
]

hash

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

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

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

然后我們再運(yùn)行npm run build打包，看看打包后的是什么東西：

可以看出，修改一個(gè)文件，所有文件的hash值跟著變

結(jié)論：牽一發(fā)動(dòng)全身，只改了一個(gè)main.css，會(huì)導(dǎo)致打包后所有文件的hash值都改變。所以當(dāng)打包名稱設(shè)置為hash時(shí)，整個(gè)項(xiàng)目文件是一致的，修改其中一個(gè)會(huì)導(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'
    })
]

此時(shí)我們運(yùn)行npm run build看看，打包后的東西：

我們可以看出，hash值會(huì)根據(jù)入口文件的不同而分出兩個(gè)陣營：

• main.js、main.css一個(gè)陣營，都屬于main.js入口文件
• console.js一個(gè)陣營，屬于console.js入口文件

那我們現(xiàn)在照樣修改一下main.css：

.title {
  // 從 #fff 改為 pink
  color: pink;
}

重新運(yùn)行npm run build打包看看：

可以看出，main.css修改后會(huì)影響main.css、main.js的hash值

結(jié)論：當(dāng)規(guī)則為chunkhash時(shí)，打包后的hash值會(huì)根據(jù)入口文件的不用而不一樣，當(dāng)某個(gè)入口文件修改后重新打包，會(huì)導(dǎo)致本入口文件關(guān)聯(lián)的所有文件的hash值都修改，但是不會(huì)影響到其他入口文件的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'
    })
]

運(yùn)行npm run build打包，看看打包后的文件長什么樣子：

可以看到，每個(gè)文件的hash值都不一樣，每個(gè)文件的hash值都是根據(jù)自身的內(nèi)容去生成的，那我們現(xiàn)在修改一下main.css：

.title {
  // pink 修改為 blue
  color: blue;
}

重新打包看看：

可以看出，main.css修改后只會(huì)影響main.css得hash值，也就是自己的hash值

結(jié)論：當(dāng)規(guī)則為contenthash時(shí)，每個(gè)文件的hash值都是根據(jù)自身內(nèi)容而生成，當(dāng)某個(gè)文件內(nèi)容修改時(shí)，打包后只會(huì)修改其本身的hash值，不會(huì)影響其他文件的hash值

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

最新評論