Bundel Skrip dengan Hash dalam Layout di Webpack

Biasanya saat membangun proyek, kita menginginkan nama bundel mengandung hash. Kita membutuhkan ini untuk mengatasi masalah caching file oleh browser.

Oleh karena itu, sangat memudahkan bahwa Webpack secara otomatis akan menghubungkan bundel dengan nama yang mengandung hash. Mari kita buktikan. Misalkan kita memiliki pengaturan berikut:

webpack.config.jsexport default {
  context: path.resolve( 'src'),
  entry: {
    test1: './test1.js',
    test2: './test2.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve('dist'),
  },
  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

Setelah build, file layout akan terhubung ke bundel kita dengan hash:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="test1.4173b379c6d6ff439604.js"></script>
    <script defer src="test2.72be8754d7c4cb0ece00.js"></script>
  </head>
  <body>
    
  </body>
</html>

Selain itu, ketika file proyek diubah dan build ulang dilakukan, Webpack secara otomatis akan mengubah hash dan memasukkan perubahan ke dalam file layout. Jika file proyek tidak berubah, maka hash juga tidak akan berubah.