Generisanje HTML šablona u Webpack-u

U prethodnoj lekciji smo instalirali i povezali HtmlWebpackPlugin. Sada će se prilikom build-a automatski generisati fajl HTML šablona i u taj šablon automatski biti uključeni skriptovi i stilovi.

Hajde da probamo najjednostavniji slučaj. Pretpostavimo da imamo jednu ulaznu tačku:

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

Kao rezultat, nakon build-a naš JavaScript će se spojiti u bundle pod imenom main.js i taj bundle će biti povezan na automatski kreirani šablon sajta:

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>
Задание 1

Izvršite build sa uključenim HtmlWebpackPlugin-om. Proverite da li vam se pojavljuje fajl šablona. Proučite njegov izvorni kod. Otvorite fajl u pretraživaču.