जावास्क्रिप्ट में वेबपैक बंडलर के काम करने का सिद्धांत

आम तौर पर, विकास के दौरान हमारे पास कोड के विभिन्न टुकड़ों वाली कई जावास्क्रिप्ट फाइलें होती हैं। ये हमारे अपने कोड के हिस्से हो सकते हैं, या फिर तीसरे पक्ष की लाइब्रेरीज। ऐसा होता है कि हमें ऐसी हर फाइल को script टैग के through HTML फाइल में कनेक्ट करना होता है।

यह बहुत अच्छा नहीं है, क्योंकि बहुत सारी कनेक्टेड फाइलें साइट की लोडिंग स्पीड को धीमा कर देती हैं। इसलिए लोडिंग को तेज करने के लिए सारे कोड को एक फाइल में रखना जरूरी है।

हालांकि, एक सामान्य फाइल में कोड डेवलप करना भी बहुत सुविधाजनक नहीं है। इसलिए वर्तमान में निम्नलिखित तरीका अपनाया जाता है: कोड को अलग-अलग फाइलों में डेवलप किया जाता है, और फिर बंडलर की मदद से उसे एक सामान्य फाइल में इकट्ठा किया जाता है, जिसे HTML फाइल में कनेक्ट किया जाता है।

अलग-अलग फाइलें ES मॉड्यूल्स होती हैं। ये मॉड्यूल import कमांड के through दूसरी फाइलों से कनेक्ट होती हैं।

आमतौर पर एक मुख्य फाइल बनाई जाती है, जिससे बाकी फाइलें कनेक्ट होती हैं। इस फाइल को एंट्री पॉइंट कहते हैं।

बंडलर एंट्री पॉइंट में जाता है, देखता है कि उससे कौन से मॉड्यूल कनेक्ट हैं। इन मॉड्यूल्स से भी अन्य मॉड्यूल कनेक्ट हो सकते हैं। बंडलर सभी कनेक्शनों को फॉलो करता है और सारे कोड को एक फाइल में इकट्ठा करता है। इस फाइल को बंडल कहते हैं।

आम तौर पर, प्रोग्रामर द्वारा लिखा गया कोड, src फोल्डर में स्थित होता है, और बिल्ड कोड को dist फोल्डर में रखा जाता है।

बंडलर बिल्ड मोड को रेगुलेट करने की भी अनुमति देता है। 'development' मोड डेवलपमेंट प्रोसेस के लिए होता है। यह कोड को डेवलपमेंट के लिए सुविधाजनक तरीके से बिल्ड करता है। 'production' मोड अंतिम कोड के लिए होता है, जिसे काम में लगाया जाएगा। इस मोड में कोड मिनीफाइड होगा, ताकि उसका साइज कम किया जा सके और लोडिंग की स्पीड बढ़ाई जा सके।