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>