HTML-lay-out genereren in Webpack

In de vorige les hebben we HtmlWebpackPlugin geïnstalleerd en aangesloten. Nu wordt er bij het bouwen automatisch een HTML-lay-outbestand gegenereerd en in deze lay-out worden automatisch scripts en stijlen ingesloten.

Laten we het eenvoudigste geval proberen. Stel dat we één ingangspunt hebben:

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

Als resultaat wordt onze JavaScript na de build gebundeld in een bundel met de naam main.js en deze bundel wordt aangesloten op de automatisch gemaakte sitelay-out:

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>