Webpack-da o'zingizning layout faylingiz

Amalda odatda bizda allaqachon o'zimizning HTML sayt layout'imiz bo'ladi. Bunday holda, Webpack-ning o'z layoutini yaratish o'rniga, bizning layoutimizdan foydalanishini ta'minlashimiz kerak. Keling, buni qanday qilishni ko'rib chiqaylik.

Bizda quyidagi layout mavjud deb faraz qilaylik:

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

Keling, Webpack-ni bizning layoutimizdan foydalanishiga majbur qilaylik. Buning uchun uni quyidagi sozlamada ko'rsatamiz:

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

Natijada, build qilingandan keyin dist papkasida bizning layoutimiz bo'ladi va unga barcha bundle'lar avtomatik ulangan bo'ladi:

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