Egen layoutfil i Webpack

I praksis har vi vanligvis allerede vår egen HTML-layout for nettstedet. I dette tilfellet trenger vi at Webpack tar vår layout, og ikke genererer sin egen. La oss se hvordan dette gjøres.

La oss si at vi har følgende layout:

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

La oss tvinge Webpack til å ta vår layout. For å gjøre dette, spesifiserer vi den i følgende innstilling:

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

Som et resultat, etter bygging i mappen dist vil vår layout være der, og i den vil alle bundlene automatisk være koblet til:

dist/index.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Min layout</title>
    
    <script defer src="main.js"></script>
  </head>
  <body>
    
  </body>
</html>