Δημιουργία HTML Layout στο Webpack

Στο προηγούμενο μάθημα, εγκαταστήσαμε και συνδέσαμε το HtmlWebpackPlugin. Τώρα, κατά τη διάρκεια της δόμησης, ένα αρχείο HTML layout θα δημιουργείται αυτόματα και σε αυτό το layout θα συνδέονται αυτόματα τα scripts και τα styles.

Ας δοκιμάσουμε την πιο απλή περίπτωση. Ας υποθέσουμε ότι έχουμε ένα entry point:

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

Ως αποτέλεσμα, μετά τη δόμηση, το JavaScript μας θα συγκεντρωθεί σε ένα bundle με όνομα main.js και αυτό το bundle θα συνδεθεί στο αυτόματα δημιουργημένο layout του site:

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>