Savs izkārtojuma fails Webpack

Prakse parasti mums jau ir savs vietnes HTML izkārtojums. Šajā gadījumā mums ir nepieciešams, lai Webpack ņemtu mūsu izkārtojumu, nevis ģenerētu savu. Apskatīsim, kā tas tiek darīts.

Pieņemsim, ka mums ir šāds izkārtojums:

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

Liekam Webpack paņemt mūsu izkārtojumu. Lai to izdarītu, norādīsim to sekojošā iestatījumā:

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

Rezultātā pēc būvēšanas mapē dist būs mūsu izkārtojums un tajā automātiski tiks pievienoti visi bundle:

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>