Webpack'te HTML Şablonu Oluşturma

Önceki derste, HtmlWebpackPlugin'i kurduk ve yapılandırdık. Artık derleme sırasında bir HTML şablon dosyası otomatik olarak oluşturulacak ve bu şablona betikler ve stiller otomatik olarak eklenecek.

En basit durumu deneyelim. Bir tane giriş noktamız olduğunu varsayalım:

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

Sonuç olarak, derlemeden sonra JavaScript'imiz main.js adında bir pakete (bundle) dönüşecek ve bu paket otomatik olarak oluşturulan site şablonuna eklenecek:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>