close

Webpack নতুনদের জন্য গাইড

Webpack আধুনিক ওয়েব ডেভেলপমেন্টে একটি অত্যন্ত দরকারী টুল, রিসোর্স ম্যানেজমেন্ট এবং প্রোজেক্টের জন্য অপ্টিমাইজেশানে সাহায্য করে। কীভাবে ব্যবহার করবেন সে সম্পর্কে নতুনদের জন্য এখানে একটি প্রাথমিক নির্দেশিকা রয়েছে Webpack:

ইনস্টল করুন Webpack

প্রথমত, Node.js ইনস্টল করুন যদি আপনি ইতিমধ্যে না থাকেন। তারপর, আপনার প্রকল্পের জন্য একটি ডিরেক্টরি তৈরি করুন এবং সেই ডিরেক্টরিতে একটি টার্মিনাল/কমান্ড প্রম্পট উইন্ডো খুলুন। Webpack ওয়েবপ্যাক-ক্লি(ওয়েবপ্যাকের কমান্ড-লাইন ইন্টারফেস) ইনস্টল এবং ইনস্টল করতে নিম্নলিখিত কমান্ডগুলি চালান:

npm install webpack webpack-cli --save-dev

Webpack কনফিগারেশন তৈরি করুন

webpack.config.js আপনার প্রকল্প ডিরেক্টরির রুট নামে একটি ফাইল তৈরি করুন । এখানেই আপনি কনফিগার করবেন Webpack । 

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

ফোল্ডার এবং ফাইল তৈরি করুন

src রুট ডিরেক্টরিতে একটি ফোল্ডার তৈরি করুন এবং এটির মধ্যে, index.js আপনার অ্যাপ্লিকেশনের প্রধান ফাইল হিসাবে পরিবেশন করার জন্য একটি ফাইল তৈরি করুন।

চালান Webpack

একটি খুলুন Terminal এবং ব্যবহার করে আপনার সোর্স কোড কম্পাইল করতে নিম্নলিখিত কমান্ডটি চালান Webpack:

npx webpack

এই কমান্ডটি চালানোর পরে, Webpack কনফিগারেশন অনুসরণ করবে, index.js ফাইলটি কম্পাইল করবে এবং ডিরেক্টরিতে নামযুক্ত একটি আউটপুট ফাইল তৈরি bundle.js করবে dist ।

HTML এ ব্যবহার করুন

ডিরেক্টরি বা আপনার পছন্দের অবস্থানে একটি HTML ফাইল তৈরি করুন dist এবং bundle.js ফাইলটির সাথে লিঙ্ক করুন:

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

অ্যাপ্লিকেশন চালান

আপনার ব্রাউজারে HTML ফাইলটি খুলুন এবং আপনার অ্যাপ্লিকেশন কাজ করছে কিনা তা পরীক্ষা করুন।

এটি শুধুমাত্র একটি মৌলিক গাইড. Webpack অনেক শক্তিশালী বৈশিষ্ট্য রয়েছে যেমন CSS পরিচালনা, মডিউল পরিচালনা, লোডার এবং প্লাগইন ব্যবহার করা, সোর্স কোড অপ্টিমাইজেশান এবং আরও অনেক কিছু। Webpack এই টুলের ক্ষমতা সম্পূর্ণরূপে লাভ করতে অফিসিয়াল ডকুমেন্টেশন অন্বেষণ করুন .