Webpack में अपनी खुद की लेआउट फ़ाइल

व्यवहार में आमतौर पर हमारे पास पहले से ही साइट की अपनी HTML लेआउट फ़ाइल होती है। इस मामले में हमें Webpack को अपना लेआउट इस्तेमाल करने की जरूरत होती है, न कि उसका खुद का जेनरेट किया हुआ। आइए देखते हैं कि यह कैसे किया जाता है।

मान लीजिए कि हमारे पास निम्नलिखित लेआउट है:

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

Webpack को हमारा लेआउट लेने के लिए कॉन्फ़िगर करते हैं। इसके लिए निम्नलिखित सेटिंग में इसे निर्दिष्ट करें:

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

नतीजतन, बिल्ड करने के बाद फ़ोल्डर dist में हमारा लेआउट होगा और उसमें सभी बंडल स्वचालित रूप से जुड़ जाएंगे:

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>