Webpack'te Kendi Layout Dosyanız

Pratikte genellikle zaten kendi site HTML layout'umuz vardır. Bu durumda Webpack'in kendi layout'unu oluşturmak yerine bizim layout'umuzu almasını isteriz. Hadi bunun nasıl yapıldığına bir göz atalım.

Aşağıdaki layout'a sahip olduğumuzu varsayalım:

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

Webpack'in bizim layout'umuzu almasını sağlayalım. Bunun için aşağıdaki ayarda belirtelim:

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

Sonuç olarak, derlemeden sonra dist klasöründe bizim layout'umuz ve içinde otomatik olarak tüm bundle'lar bağlanmış olacak:

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>