深入了解webpackhash

一、什麼是webpackhash

webpack是一個模塊打包工具，可以將多個模塊打包成一個文件，同時還可以做很多優化操作，webpackhash在webpack中起着非常重要的作用，它是webpack生成的唯一hash值。Webpack在構建時，會為每個文件生成一個hash值，用於唯一標識該文件，同時也可以做文件是否改變的判斷。webpackhash根據所有的入口文件、模塊的內容和webpack的配置信息生成，這意味着當有任何一個內容發生更改時，webpackhash就會發生變化，而且一旦hash值確定下來，就會被使用在所有的構建文件中。

二、webpackhash的用途

1、文件緩存

webpackhash的唯一性可以用來實現文件緩存，因為它會根據文件內容和webpack配置生成不同的hash值，在文件內容改變時，hash值也會發生變化，從而在使用瀏覽器緩存文件時，可以強制瀏覽器重新請求新的文件。我們可以將webpackhash添加到文件名中，這樣就可以在文件內容改變時自動更新文件名稱，從而達到強制瀏覽器重新請求的目的。

例如：

output: {
    filename: 'bundle.[hash].js'
}

2、多入口文件

webpack支持多入口文件，在配置多個入口文件時，需要考慮到文件打包後的文件名，可以使用webpackhash來解決這個問題。

例如：

entry: {
    app: './src/index.js',
    vendors: './src/vendors.js'
},
output: {
    filename: '[name].[hash].js'
}

3、CDN緩存

對於一些第三方庫，我們可能會引用CDN資源，但CDN資源的緩存時間較長，如果發布新版本，需要強制刷新CDN緩存。可以使用webpackhash作為版本號，可以實現CDN強制刷新。

三、webpackhash的缺點

1、文件內容改變次數較多時，webpackhash會變得非常長。如果使用的是默認配置，webpack生成文件名和每個模塊的唯一標識碼，當你的項目里有大量的chunk或者長期不更改時，webpackhash會變長，並且給版本管理帶來很大的負擔。

2、webpackhash不是真正意義上的唯一標識，因為webpackhash是根據文件內容和webpack配置生成的，如果你的配置更改了，生成的hash也會變化。

四、webpackhash的配置

webpackhash可以通過webpack的配置進行配置，webpack有三種hash可以選擇：chunkhash、contenthash和hash。

1、chunkhash

chunkhash是根據內容生成的hash值，只要文件內容不變，chunkhash就不會變。chunkhash適用於解決緩存問題，但必須在每次構建之後都要更改文件名。chunkhash只能用於非公共模塊。

例如：

output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js'
}

2、contenthash

contenthash是根據文件內容生成的hash值，只有在文件內容發生變化時，才會變化。contenthash適用於不改變文件的文件名，但需要解決文件內容緩存問題。

例如：

output: {
    filename: '[name].[contenthash].js',
}

3、hash

hash是每次構建都會生成的hash值，其生成依賴於webpack的全局配置，只要其中任何一個配置發生了變化，hash就會發生變化。

例如：

output: {
    filename: '[name].[hash].js',
}

總結

webpackhash作為webpack生成的唯一hash值，在文件緩存、多入口文件、CDN緩存等方面有着非常重要的作用。但是也需要注意它的缺點，特別是文件內容改變次數較多時，會導致hash值變得非常長。