ওয়েবপ্যাক দিয়ে কীভাবে আধুনিক অ্যাপ্লিকেশন তৈরি করা যায়
আমরা স্ট্যান্ডার্ড ওয়েবপ্যাক কনফিগারেশনটি কতদূর পেতে পারি?
আমি গত মাসে জিডিজি ডেভেস্টে কথা বলার সুযোগ পেয়েছি যা আমাদের আধুনিক অ্যাপ্লিকেশনগুলিতে ওয়েবপ্যাকগুলি ব্যবহারের উপর দৃষ্টি নিবদ্ধ করে। আপনি এখানে স্লাইডগুলি পরীক্ষা করে দেখতে পারেন।
প্রতিদিন আমি দুর্দান্ত এবং দ্রুত দলগুলিতে ইঞ্জিনিয়ার এবং / অথবা পরামর্শক হিসাবে কাজ করি এবং ওয়েবপ্যাকটি এই সমস্ত টিমের পুনরাবৃত্তির কারণ বলে মনে হচ্ছে (আমাদের বেশিরভাগ অ্যাপ্লিকেশনের জন্য আমরা রিএ্যাকটিজ ব্যবহার করি)। মূলত আমার আলাপটি ফ্রন্টএন্ড ফ্রেমওয়ার্ক / লাইব্রেরি যেমন রিঅ্যাক্টজেএস, ভ্যু, অ্যাঙ্গুলার ইত্যাদির সাথে ওয়েবপ্যাকগুলি ব্যবহার করার বিষয়ে ফোকাস করার কথা ছিল talk
আমার প্রস্তাব জমা দেওয়ার আগে, আমি ওয়েব-প্যাক সম্পর্কে লোকেরা কী ভাবেছে তা দেখার জন্য একটি মিনি-পোল করার সিদ্ধান্ত নিয়েছি। আমার অবাক করে দিয়ে, অনেকে ওয়েবপ্যাকটিকে "কেবল ফ্রেমওয়ার্ক সহ ব্যবহৃত" হিসাবে উল্লেখ করেছেন যা সত্য থেকে দূরে ছিল। এখনও অন্যরা বলেছেন যে একটি ওয়েবপ্যাক স্থাপন করা দু: খজনক। এটি আমাকে ভ্যানিলা জেএস-এর সাথে ওয়েবপ্যাকগুলি ব্যবহার করতে আরও মনোনিবেশ করতে এবং ডিফল্ট ওয়েবপ্যাক কনফিগারেশনের মাধ্যমে আমরা কতদূর পেতে পারি তা দেখার দিকে পরিচালিত করেছে।
কিন্তু প্রথম:
ওয়েবপ্যাক কি?
ব্যক্তিগতভাবে, আমি ওয়েবপ্যাকটিকে এমন একটি সরঞ্জাম হিসাবে সংজ্ঞায়িত করি যা অনেক জাভাস্ক্রিপ্ট মডিউল নেয় এবং সেগুলি ব্রাউজারে প্রেরণ করা যেতে পারে এমন একটি জাভাস্ক্রিপ্ট মডিউলে একীভূত করে।
আমি জানি এটি ওয়েবপ্যাক যা করে তার একটি সরলীকরণ, তবে লোকেরা এটি পেয়েছে বলে মনে হয়। আরও ব্যাখ্যা করার জন্য, ওয়েবপ্যাক এমন একটি বান্ডিলার যা নির্ভরতা সহ জাভাস্ক্রিপ্ট মডিউলগুলির জন্য অনুসন্ধান করে (মূলত জাভাস্ক্রিপ্ট ফাইলগুলির জন্য অন্যান্য জাভাস্ক্রিপ্ট ফাইলগুলির কোড প্রয়োজন), সেগুলি সংক্ষেপ করে এবং তার পরে একটি জাভাস্ক্রিপ্ট ফাইল বা ফাইলগুলি তৈরি করে যা এতে অন্তর্ভুক্ত থাকে কোন নির্ভরতা আছে। এইভাবে, তাদের সহজেই ব্রাউজারে প্রেরণ করা যায়।
ওয়েবপ্যাকের ইতিহাস
ওয়েবপ্যাক সমস্যা সমাধানের চেষ্টা করছে তা বোঝার জন্য, ওয়েবপ্যাকের ইতিহাস সম্পর্কে আমাদের কিছু জানা দরকার know এই বিভাগটি সংক্ষিপ্ত রাখতে, আমি কেবল দুটি মূল সরঞ্জাম এবং একটি ধারণাটি রূপরেখা দিয়েছি:
- গুগল ওয়েব টুলকিট: এটি গুগলের একটি ফ্রেমওয়ার্ক যা জাভাটিকে জাভাস্ক্রিপ্টে রূপান্তরিত করে (আমি জানি, ডান?) এটিতে এমন একটি বৈশিষ্ট্য রয়েছে যা ওয়েবপ্যাকটিতে আমার ব্যক্তিগত প্রিয় বৈশিষ্ট্য বলে মনে হচ্ছে এটি "কোড বিভাজন"। (আমি পরবর্তী প্রবন্ধে কোড ব্রেকডাউনটি ব্যাখ্যা করব))
- মডিউল_উইবমেক: এটি ওয়েবপ্যাক থেকে প্রাপ্ত লাইব্রেরি। এটি মূলত একটি সরঞ্জাম যা ব্রাউজারের জন্য আমাদের জাভাস্ক্রিপ্ট ফাইলগুলি নোডজেএস (চমত্কার) জন্য আমরা একইভাবে সংগঠিত করার অনুমতি দেয়।
- আইআইএফই: অর্থ হ'ল ফাংশন এক্সপ্রেশন অবিলম্বে বলা হয়। এটি মূলত একটি জাভাস্ক্রিপ্ট ফাংশন যা এটি তৈরি করা হয়েছিল বা একই সাথে বলা হয়েছিল it
তত্ক্ষণাত ফোন করা ফাংশন এক্সপ্রেশন
আমি এটির নিজের বিভাগে বিভক্ত হয়েছি কারণ আমাকে আরও ব্যাখ্যা করতে হয়েছিল। এটি একটি আইআইএফইর উদাহরণ:
আমরা যদি এই স্ক্রিপ্ট ট্যাগটিতে এই ফাংশনটি রাখি তা তা অবিলম্বে এটি করবে। স্ক্রিপ্ট ট্যাগ ব্রাউজার থেকে লোড করা হয়। এটি উইন্ডো.অনলোডে কোনও ফাংশন সংযোজন করার সমান, তবে এর অতিরিক্ত সুবিধা রয়েছে।
জাভাস্ক্রিপ্টে বন্ধের কাজ করার কারণে, আইআইএফইতে ঘোষিত সমস্ত ভেরিয়েবলগুলি এই ফাংশনটিতে অন্তর্ভুক্ত রয়েছে। এর অর্থ হল যে আমার কোড বেসে নেমস্পেস বিরোধের সাথে আমার কোনও সমস্যা নেই, তবে একই সাথে আইআইএফই সরবরাহিত কার্যকারিতাটিতে আমার এখনও অ্যাক্সেস থাকবে।
ওয়েবপ্যাক কেন?
ওয়েবপ্যাক আজ কোন সমস্যার মুখোমুখি?
প্রথমত, আমাদের স্ক্রিপ্ট ট্যাগগুলির সমস্যা আছে। আমি এমন একটি কোড বেসে কাজ করছি যেখানে প্রতিটি HTML পৃষ্ঠায় খুব সুনির্দিষ্ট ক্রমে কমপক্ষে 30 টি স্ক্রিপ্ট ট্যাগ রয়েছে। আমি জানি কেউ কেউ বলতে পারে এটি সত্যিকারের সমস্যা নয়, তবে ব্রাউজারকে প্রতি ফাইলের জন্য একটি অনুরোধ করতে হবে, যা আপনার "লোড টাইম" लाई প্রভাবিত করতে পারে। স্ক্রিপ্ট ট্যাগগুলি পরিচালনা করাও কঠিন হতে পারে, এবং কেবলমাত্র একটির পুনর্বিন্যাস করা অ্যাপ্লিকেশনটি ভেঙে দিতে পারে (এটি আমি চেষ্টা করেছি।)।
দ্বিতীয়ত, নাম স্থানটির সমস্যা এখনও রয়েছে যেখানে বিশ্বব্যাপী নেমস্পেস বিশৃঙ্খল হয়ে যেতে পারে। আমি জানি আমরা খুব সৃজনশীল মানুষ, বিশেষত যখন ভেরিয়েবলের নামকরণের বিষয়টি আসে তবে আপনি যখন আরও বড় দলের হয়ে থাকেন তখন এমন সময় আসে যখন ভেরিয়েবলের নামগুলি সংঘর্ষ হয়। এমনকি আপনার ভবিষ্যতও আপনি আবার একই নামটি ভাবতে পারেন (হ্যাঁ, এটি ঘটে)।
আমি কিছু সংস্থাগুলি জানি যা তাদের বিকাশকারীদের সর্বদা তাদের ফাংশনগুলির মধ্যে তাদের ভেরিয়েবলগুলি রাখার অভ্যাস হিসাবে গড়ে তোলে তবে আমরা সর্বদা এটির উপর নির্ভর করতে পারি না (বা নির্ভর করতে পারি না)। শেষ পর্যন্ত, এটি কেবল উদ্বেগগুলি পৃথক করা কঠিন করে তোলে।
তৃতীয়, আমার মনে আছে ওয়েবপ্যাকটি মডিউল_উইবমেক থেকে এসেছে। যেহেতু আমরা নোডজেএস-এ (কমনজেএস ব্যবহার করে) আমাদের ফাইলগুলি ঠিক একইভাবে সাজানোর জন্য ওয়েবপ্যাক ব্যবহার করতে পারি, তাই আমাদের কাছে মডুলার কোড লেখার অতিরিক্ত সুবিধা রয়েছে যা খুব ভালভাবে স্কেল করে (কেবলমাত্র ফ্রন্টএন্ড ফ্রেমওয়ার্কগুলি ব্যবহার করে এমন লোকদের জিজ্ঞাসা করুন)।
কমনজেএস
আমি সিজেএস সম্পর্কে খুব বেশি ব্যাখ্যা করতে যাচ্ছি না কারণ এটি নিবন্ধটির মূল বিষয় নয়। তবে, আপনি বলতে পারেন যে এটি একটি জেএস মডুলার সিস্টেম যা নোডজেএসে ব্যবহৃত হয়।
ওয়েবপ্যাকের সাহায্যে আমরা ব্রাউজারে সহজেই এই মডিউলটি এবং "আরও ভাল" ইএস মডিউল সিস্টেমটি ব্যবহার করতে পারি (ওয়েবপ্যাকটি বুদ্ধিমান উপায়ে এটি পরিচালনা করে)। এটি আমাদের সত্যই মডুলার এবং রক্ষণাবেক্ষণযোগ্য কোড লিখতে সহায়তা করে যাতে একটি জেএস ফাইল কোনও একক কার্যকারিতা (একক দায়িত্বের নীতিমালা) পরিচালনা করতে পারে।
ES মডিউল (ESM)
এটি অন্য একটি মডুলার সিস্টেম যা বিশ্বাস করুন বা না বিশ্বাস করুন, ইতিমধ্যে বর্তমান ব্রাউজারগুলি প্রয়োগ করেছে। দুর্ভাগ্যক্রমে এটির এর সীমা রয়েছে। আমরা কোনও সমস্যা ছাড়াই ওয়েবপ্যাকের সাহায্যে এই মডিউলটিও ব্যবহার করতে পারি (যেহেতু ওয়েবপ্যাক এখনও এটিকে রূপান্তরিত করে) তবে আমি দেখতে পেয়েছি যে আমি বেশিরভাগ কোডবেসগুলিতে ইএসএম দিয়ে পাঠযোগ্য হয়ে উঠছি। আমি গভীর খনন করতে পছন্দ করতাম, তবে এটি এই নিবন্ধটির লক্ষ্য নয়। আরও ভাল ব্যাখ্যার জন্য, আমি এই আশ্চর্যজনক নিবন্ধটি সুপারিশ করব।
ওয়েবপ্যাক কীভাবে কাজ করে?
আমি জানি আমি আগেই বলেছিলাম যে ওয়েবপ্যাকটি যাদু ছিল তবে আমি মিথ্যা বললাম। এটি যথাসম্ভব সহজ করার জন্য:
- ওয়েবপ্যাক একক এন্ট্রি পয়েন্টে পাথ নিয়ে যায় যা একটি .js ফাইল এবং আমদানি নির্দেশাবলীর সন্ধান করে (এটি হয় ESM বা সিজেএস হতে পারে)।
- এর পরে আমদানি করা ফাইলটি অনুসন্ধান করা হয় এবং পরবর্তী আমদানির নির্দেশাবলী অনুসন্ধান করা হয়। একটি নির্ভরতা ডায়াগ্রাম তৈরি করা হয়।
আরও ভাল ব্যাখ্যার জন্য ছবিটি দেখুন:
আমার সেখানে দুটি ফাইল রয়েছে, index.js এবং helpers.js। এই দুটি ফাইল পৃথক ফাংশন সম্পাদন করে তবে আমি আমদানি করে আমার সূচি.জেএস ফাইলটিতে সাহায্যকারী.জেজে ফাংশনটি ব্যবহার করি। ডিফল্টরূপে, ওয়েবপ্যাক এন্ট্রি পয়েন্টটি ./src/index.js। সেখান থেকে এটি নির্ভরতা চিত্রটি এভাবে তৈরি করার চেষ্টা করে:
কিভাবে শুরু করেছিল
ওয়েবপ্যাকগুলি কীভাবে কাজ করে তার আরও ভাল ধারণা পেতে, আসুন একটি সহজ টোডো অ্যাপ্লিকেশন তৈরি করুন। এটিতে কেবলমাত্র প্রাথমিক যোগ এবং কার্যকারিতা মুছে ফেলা এবং ওয়েবপ্যাকের ডিফল্ট কনফিগারেশন (এটি কোনও ওয়েবপ্যাক কনফিগারেশন ফাইল নয়) এর সাথে একত্রিত হয়। এটি অ্যাপ্লিকেশনটির মতো দেখাচ্ছে:
প্রথম পদক্ষেপটি একটি নতুন প্রকল্প ডিরেক্টরি তৈরি করা এবং দুটি ফোল্ডার তৈরি করা হয়, যার নাম ডিস্ট এবং অন্যটি নামযুক্ত এসসিআর। ডিফল্টরূপে, ওয়েবপ্যাকের প্রবেশ পয়েন্টটি ./src/index.js হয় এবং জেএস প্যাকেজটি ./dist/main.js এ আউটপুট হয় is এজন্য আমরা দুটি ফোল্ডার তৈরি করছি।
আপনি dist ফোল্ডারে index.html ফাইল তৈরি করতে পারেন। এটি ওয়েবপ্যাকের জন্য প্রয়োজনীয় নয় কারণ ফাইলটি ডিরেক্টরি ডিরেক্টরিতে যে কোনও জায়গায় সংরক্ষণ করা যেতে পারে এবং আপনি কেবল মেইন.জেএস ফাইলটি উল্লেখ করতে পারেন। শেষ পর্যন্ত, আপনার প্রকল্পের কাঠামোটি দেখতে এমন হওয়া উচিত:
এসআরসি ফোল্ডারে আমরা ইনডেক্স। Html ফাইল তৈরি করি, যাতে আমরা আমাদের টো-ডিও অ্যাপ্লিকেশনটির কার্যকারিতা বাস্তবায়ন শুরু করি। প্রথমে আমরা index.html ফাইলটি ডেটা সহ পূরণ করি। যেহেতু একটি টু-ডিও অ্যাপ তৈরি করা এই টিউটোরিয়ালের অংশ নয়, আমি কেবল নিম্নলিখিত কোডটি দেখাব:
টোডো অ্যাপ </ শিরোনাম </ মাথা> <body> <ডি ক্লাস = "ধারক"> <p> <লেবেল = "নতুন-টাস্ক"> উপাদান যুক্ত করুন </ লেবেল> <ইনপুট আইডি = "নতুন-টাস্ক" প্রকার = "পাঠ্য"> <বোতাম আইডি = "অ্যাডটাস্ক"> </ বাটন> </ p> <h3> টোডো </ h3> <ul id = "কার্য"> </ ul> </ div> <স্ক্রিপ্ট src = "main.js"> </ স্ক্রিপ্ট </ বডি> </ html></pre><p>এখন এটি কাজ করা যাক। আমরা দুটি ফাংশন (যুক্ত এবং মুছে ফেলা) তাদের নিজস্ব ফাইলগুলিতে ভাঙ্গতে যাব এবং তারপরে সেগুলি index.js এ আমদানি করব। আমরা আমাদের এসআরসি ফোল্ডারে অ্যাডটাস্ক.জেএস এবং ডিলিটটাস্ক.জেএস নামে দুটি ফাইল তৈরি করতে যাচ্ছি। আপনার প্রকল্পের কাঠামোটি এখন দেখতে এইরকম হওয়া উচিত:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857964226.png" /><p>আমরা এখন আমাদের প্রয়োজনীয় যুক্তি যুক্ত করা শুরু করতে পারি। সুতরাং আসুন প্রথমে ডিলিটটাস্ক.জেএস ফাইলটি বাস্তবায়ন করি কারণ এর কোনও নির্ভরতা নেই। আপনার মুছে ফেলা টাস্ক.জেএস ফাইলটিতে এটি আটকান:</p><pre>কনসট ডিলিটটাস্ক = ফাংশন (গুলি) so কনসোল.লগ ("টাস্ক মুছুন ...", ই) // উল তালিকা থেকে মূল তালিকা আইটেমটি সরান আইটেম = e.target.parentNode; var ul = listItem.parentNode;</pre><pre>ul.removeChild (listItem); };</pre><pre>ডিফল্ট ডিফল্ট ডিলিটটাস্ক;</pre><p>এই ফাইলটিতে কেবল ডিলিটটাস্ক ফাংশন তৈরি করা হয় এবং তারপরে স্ট্যান্ডার্ড এক্সপোর্ট হিসাবে রফতানি করা হয়।</p><p>এখন আমরা অ্যাডটাস্ক ফাংশনটি বাস্তবায়ন করতে পারি। AddTask.js ফাইলে, নিম্নলিখিত কোডটি যুক্ত করুন:</p><pre>"./DeleteTask" থেকে মুছুন টাস্ক আমদানি করুন;</pre><pre>create createNewTaskElement = ফাংশন (টাস্ক স্ট্রিং) {কনট লিস্টটি আইটেম = ডকুমেন্ট.ক্রেটইলেট ("লি"); কনস্ট লেবেল = ডকুমেন্ট.ক্রেটএলিমেন্ট ("লেবেল"); কনট ডিলিটবটন = ডকুমেন্ট.ক্রেটইলেট ("বোতাম");</pre><pre>deleteButton.innerText = "মুছুন"; মুছুন বাটন.ক্লাসনাম = "মুছুন"; ডিলিটবটন.এডডিএভেন্টলিস্টনার ("ক্লিক করুন", ডিলিটটাস্ক);</pre><pre>label.innerText = টাস্কস্ট্রিং;</pre><pre>listItem.appendChild (লেবেল); listItem.appendChild (মুছে ফেলা);</pre><pre>প্রত্যাবর্তন তালিকা };</pre><pre>কনড অ্যাডটাস্ক = ফাংশন (গুলি) {কমান্ড টাস্কলিস্ট = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ("কার্য"); কন্সট টাস্ক = ডকুমেন্ট.জেট এলিমেন্টবাইআইডি ("নতুন-টাস্ক"); if (টাস্ক.ভ্যালু! == "") {নতুন টাস্কআইটেম = createNewTaskElement (টাস্ক.ভ্যালু); টাস্কলিস্ট.অ্যাপেন্ডচিল্ড (নতুন টাস্কআইটেম); টাস্ক.ভ্যালু = ""; }};</pre><pre>এক্সপোর্ট ডিফল্ট অ্যাডটাস্ক;</pre><p>এটিতে আমরা প্রথমে ফাইলটি ডিলিটটাস্ক.জেগুলি আমদানি করি। আমদানির সময় যদি কোনও এক্সটেনশান নির্দিষ্ট না করা থাকে তবে ওয়েবপ্যাকটি স্বয়ংক্রিয়ভাবে ধরে নেয় যে এটি ডিফল্টরূপে একটি .js ফাইল। তারপরে আমাদের ফাংশন রয়েছে যা তালিকার আইটেমটি তৈরি করে যা ফর্মটিতে প্রবেশ করা টাস্কটি অন্তর্ভুক্ত করে। মনে রাখতে হবে যে আমরা মুছুন বোতামটির ক্লিক হ্যান্ডলারের সাথে মুছে ফাংশনটি সংযুক্ত করছি। তারপরে আমরা আসল অ্যাডটাস্ক ফাংশন তৈরি করে এটিকে রফতানি করি।</p><p>আমাদের তখন আমাদের addTask ফাংশনটি index.js এ আমদানি করতে হবে। আপনার index.js ফাইলে নিম্নলিখিত কোডটি আটকে দিন:</p><pre>'./addTask' থেকে অ্যাডটাস্ক আমদানি করুন;</pre><pre>কনস্ট addTaskButton = ডকুমেন্ট.সেটমেন্ট বিবিআইডি ("অ্যাডটাস্ক"); #TaskButton.addEventListener ("ক্লিক করুন", অ্যাডটাস্ক);</pre><p>এটি বেশ সহজ: আমরা অ্যাডটাস্ক ফাংশনটি আমদানি করি এবং এটিকে অ্যাডটাস্ক বাটনের জন্য ক্লিক হ্যান্ডলারে যুক্ত করি। আপনি যদি উপরের পদক্ষেপগুলি অনুসরণ করেন তবে আপনার প্রস্তুত হওয়া উচিত।</p><p>আমাদের মেইন.জেএস ফাইলটি পেতে আমাদের কোড বেস থেকে ওয়েবপ্যাক চালানো দরকার। এই পদক্ষেপের জন্য, নোডজেএস আপনার সিস্টেমে ইনস্টল করা আছে তা নিশ্চিত করুন। তারপরে আমরা নিম্নলিখিত কমান্ডের সাথে বিশ্বব্যাপী ওয়েবপ্যাক এবং ওয়েবপ্যাক সি এল এল ইনস্টল করব:</p><pre>এনপিএম ইনস্টল -জি ওয়েবপ্যাক ওয়েবপ্যাক-ক্লিপ বা এনডো এনপিএম ইনস্টল -জি ওয়েবপ্যাক ওয়েবপ্যাক-ক্লিপ</pre><p>ইনস্টলেশন সমাপ্ত হওয়ার পরে, নিম্নলিখিত কমান্ডটি চালান:</p><pre>ওয়েবপ্যাক</pre><p>এটি আমাদের ফাইলটিকে সফলভাবে বান্ডেল করবে, তবে আমাদের টার্মিনালে এই জাতীয় সতর্কতা দেখতে হবে:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569857965682.png" /><p>ওয়েবপ্যাকটি কেবলমাত্র আমাদের সতর্ক করে যে আমরা কোনও মোড নির্দিষ্ট করে নেই। আমরা এটি যেমনটি রেখে দিতে পারি এবং কোড চালাতে পারি, সবকিছু ঠিকঠাক কাজ করা উচিত। আপনি যদি সতর্কতাটি পছন্দ না করেন তবে আপনি কীভাবে ওয়েবপ্যাকটি চালাতে পারবেন তা এখানে:</p><pre>ওয়েবপ্যাক --মোড = বিকাশ</pre><p>এবং আপনি যেতে ভাল</p><h3>শেষ করি</h3><p>আপনি যদি পথ হারিয়ে ফেলেন তবে আপনি সর্বদা রেফারেন্সের জন্য গিটহাব রেপো ব্যবহার করতে পারেন (এটিতে সিএসএস শৈলী অন্তর্ভুক্ত রয়েছে)।</p><p>আমি আশা করি যে এই নিবন্ধটি ওয়েবপ্যাকের কী অফার করেছে তা আপনাকে দেখাতে সক্ষম হয়েছিল (কোনও বিন্যাস ছাড়াই কেবলমাত্র বেসিক)। নীচের নিবন্ধগুলিতে, আমি কীভাবে কোড বিভাজন, অলস লোডিং এবং মাল্টিপেজ অ্যাপ্লিকেশনগুলির সাথে কাজ করার জন্য ওয়েবপ্যাকটি কনফিগার করার মতো বৈশিষ্ট্যগুলির জন্য বিভিন্ন কাস্টম কনফিগারেশন সেট আপ করব তা দেখাব।</p><p>এই নিবন্ধটি যথাসম্ভব সহজ রাখার জন্য, আমি নিবন্ধে একটি প্যাকেজ.জসন ফাইল ব্যবহার করা এড়ানো করেছি। একটি প্যাকেজ.জসন ফাইল ব্যবহার করা এবং স্থানীয়ভাবে ওয়েবপ্যাক ইনস্টল করা ওয়েবপ্যাক ব্যবহারের জন্য সর্বাধিক স্কেলযোগ্য পদ্ধতি। আমি ওয়েবপ্যাক ব্যবহার সম্পর্কে আমার পরবর্তী নিবন্ধে এটি কভার করব।</p><p>আগত নিবন্ধগুলিতে চলাচল করা আরও সহজ করার জন্য, আপনি ওয়েবপ্যাকের জন্য ব্যাখ্যা বা বাস্তবায়নের বিষয়ে কোনও মন্তব্য যুক্ত করতে পারলে এটি খুব সহায়ক হবে। </p><p>মূলত পরিকল্পনার চেয়ে নিবন্ধটি আরও উন্নত করার বিষয়ে তাদের মতামতের জন্য আমি বিশেষত শান টি। লারকিন, ইস্রায়েল ওবিয়াগবা এবং হাসান সানিকে ধন্যবাদ জানাতে চাই। আপনি সব শিলা!</p></div><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/question/how-to-connect-ipad-to-projector-wirelessly/" title="আইপ্যাডকে প্রজেক্টরের সাথে ওয়্যারলেসভাবে কীভাবে সংযুক্ত করবেন">আইপ্যাডকে প্রজেক্টরের সাথে ওয়্যারলেসভাবে কীভাবে সংযুক্ত করবেন</a><a href="/question/how-to-zoom-in-pycharm/" title="কিভাবে পিচার্ম জুম করবেন">কিভাবে পিচার্ম জুম করবেন</a><a href="/question/how-to-address-the-dalai-lama/" title="কীভাবে দালাই লামাকে সম্বোধন করবেন">কীভাবে দালাই লামাকে সম্বোধন করবেন</a><a href="/question/how-to-get-rid-of-paspalum/" title="কীভাবে পাসপালাম থেকে মুক্তি পাবেন">কীভাবে পাসপালাম থেকে মুক্তি পাবেন</a><a href="/question/how-to-cut-steel-rod/" title="কিভাবে ইস্পাত রড কাটা">কিভাবে ইস্পাত রড কাটা</a><a href="/question/how-to-iron-dry-clean-only-pants/" title="শুকনো ক্লিন শুধুমাত্র প্যান্ট লোহা কিভাবে">শুকনো ক্লিন শুধুমাত্র প্যান্ট লোহা কিভাবে</a><a href="/question/how-to-make-fallout-4-harder/" title="কীভাবে 4 ফল্টআউট তৈরি করবেন">কীভাবে 4 ফল্টআউট তৈরি করবেন</a><a href="/question/how-to-get-full-screen-on-tv-from-laptop-hdmi/" title="কীভাবে ল্যাপটপ এইচডিএমআই থেকে টিভিতে পূর্ণ পর্দা পাবেন">কীভাবে ল্যাপটপ এইচডিএমআই থেকে টিভিতে পূর্ণ পর্দা পাবেন</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">আরো দেখুন</h4><a href="/article/guest-posting-101-how-to-be-read-by-the-masses-3d19a8/" title="অতিথি পোস্ট 101 - জনতার দ্বারা কীভাবে পড়বেন">অতিথি পোস্ট 101 - জনতার দ্বারা কীভাবে পড়বেন</a><a href="/article/how-to-write-a-high-quality-novel-in-one-draft-with-no-outline-9cb5cb/" title="কোনও রূপরেখা ছাড়াই একটি খসড়াটিতে কীভাবে একটি উচ্চমানের উপন্যাস লিখবেন">কোনও রূপরেখা ছাড়াই একটি খসড়াটিতে কীভাবে একটি উচ্চমানের উপন্যাস লিখবেন</a><a href="/article/how-to-know-what-to-write-about-including-my-secret-sauce-e6c6cb/" title="কী লিখবেন তা কীভাবে জানবেন (আমার গোপন সস সহ)">কী লিখবেন তা কীভাবে জানবেন (আমার গোপন সস সহ)</a><a href="/article/how-to-be-an-ethical-sugar-daddy-0e9910/" title="কিভাবে একটি নৈতিক চিনির বাবা হতে হবে">কিভাবে একটি নৈতিক চিনির বাবা হতে হবে</a><a href="/article/how-to-master-async-await-with-this-real-world-example-9932dc/" title="এই আসল-জগত উদাহরণটি ব্যবহার করে কীভাবে async আয়ত্ত করতে / অপেক্ষা করতে হয় তা এখানে">এই আসল-জগত উদাহরণটি ব্যবহার করে কীভাবে async আয়ত্ত করতে / অপেক্ষা করতে হয় তা এখানে</a><a href="/article/how-to-build-an-absolutely-creative-group-fd71f3/" title="কীভাবে সম্পূর্ণ সৃজনশীল গ্রুপ তৈরি করবেন">কীভাবে সম্পূর্ণ সৃজনশীল গ্রুপ তৈরি করবেন</a><a href="/article/navcoin-community-fund-how-to-vote-for-your-favorite-proposals-2c86fe/" title="নাভকয়েন সম্প্রদায় তহবিল: আপনার প্রিয় প্রস্তাবগুলির পক্ষে কীভাবে ভোট দিন">নাভকয়েন সম্প্রদায় তহবিল: আপনার প্রিয় প্রস্তাবগুলির পক্ষে কীভাবে ভোট দিন</a><a href="/article/the-biggest-career-mistake-you-can-make-and-how-to-avoid-it-a1a828/" title="ক্যারিয়ারের সবচেয়ে বড় ভুল আপনি করতে পারেন (এবং এটি কীভাবে এড়ানো যায়)">ক্যারিয়ারের সবচেয়ে বড় ভুল আপনি করতে পারেন (এবং এটি কীভাবে এড়ানো যায়)</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sa flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-modern-applications-with-webpack-25b505/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>