File Layout Sendiri di Webpack

Dalam praktiknya, biasanya kita sudah memiliki layout HTML situs sendiri. Dalam hal ini, kita perlu Webpack mengambil layout kita, bukan menghasilkan miliknya sendiri. Mari kita lihat bagaimana cara melakukannya.

Misalkan kita memiliki layout berikut:

src/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</title>
  </head>
  <body>
    
  </body>
</html>

Mari kita buat Webpack mengambil layout kita. Untuk melakukan ini, tentukan dalam pengaturan berikut:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
};

Hasilnya, setelah build di folder dist akan ada layout kita dan di dalamnya semua bundle akan terhubung secara otomatis:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My layout</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>