Hash pada Webpack

Hash

TLDR; Hash adalah suatu kode dari hasil enkripsi yang umumnya terdiri dari huruf maupun angka yang acak. Fungsi / pengunaan Hash sendiri dalam webpack yang digunakan umumnya untuk menghindari duplikasi ketika terjadinya update pada JS / saat melakukan update. Lalu bagaimana penggunaan hash yang tepat ketika kita melakukan konfigurasi pada webpack?

Perbedaan dan jenis hash pada webpack

Hashing dapat digunakan dengan menggunakan kurung siku pada script webpack dan Hash sendiri memilik jenis / tipe yang sering digunakan ketika membuat script webpack.

1. [hash]
Ketika kita menggunakan hash maka ketika setiap build terjadi perubahan maka chunk sendiri akan membuat hash baru.

contoh :

module.exports = {
  //...
  output: {
    filename: '[name].[hash].bundle.js'
  }
};

2. [Chunkhash]
Ketika menggunakan chunkchash maka ketika setiap build terjadi
perubahan pada chunk hanya chunk tertentu saja atau chunk yang entry pointnya terjadi perubahan. Maka dalam perubahan ini dalam kasus webpack ini sangat cocok digunakan untuk menghash file javascript.

contoh:

module.exports = {
  //...
  output: {
    filename: '[chunkhash].bundle.js'
  }
};

3. [Contenthash]
Contenthash sering digunakan untuk menghash file css karena jika menggunakan hash yang sama dengan hash pada javascript maka ketika terjadi update pada entry css tersebut maka chunk file css hashnya tidak akan terganti untuk menghindari case seperti ini maka lebih baik menggunakan contenthash.

contoh:

module.exports = {
  //...
  output: {
    filename: '[contenthash].bundle.css'
  }
};

NOTES

Slicing hash

Jika hash dirasa terlalu panjang kita dapat menggunakan [hash:8] maka hash yang dihasilkan akan menjadi seperti 8c4cbfdb

Referensi untuk dipelajari :
https://medium.com/@sahilkkrazy/hash-vs-chunkhash-vs-contenthash-e94d38a32208
https://webpack.js.org/guides/caching/
https://webpack.js.org/configuration/output/
https://codeburst.io/long-term-caching-of-static-assets-with-webpack-1ecb139adb95