Skip to main content
यह गाइड बताता है कि कैसे अपने ब्राउज़र एक्सटेंशन प्रोजेक्ट को वेबपैक के साथ सेटअप करें, जिसमें कई जावास्क्रिप्ट एंट्री पॉइंट्स और स्टैटिक एसेट मैनेजमेंट का समर्थन करने वाला कॉन्फ़िगरेशन शामिल है।

चरण 1: प्रारंभिक प्रोजेक्ट सेटअप

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

चरण 2: Node.js और NPM सेटअप करना

सुनिश्चित करें कि आपके सिस्टम पर Node.js और NPM इंस्टॉल हैं। Node.js पैकेज इकोसिस्टम को चलाने के लिए आवश्यक है, और NPM आपके प्रोजेक्ट की निर्भरताओं को प्रबंधित करने के लिए उपयोग किया जाता है।

चरण 3: वेबपैक और अन्य निर्भरताएँ इंस्टॉल करना

टर्मिनल में अपने प्रोजेक्ट की रूट डायरेक्टरी पर जाएँ और यदि आपने पहले से नहीं किया है तो एक नया NPM प्रोजेक्ट प्रारंभ करें:
फिर, वेबपैक और आवश्यक लोडर्स और प्लगइन्स इंस्टॉल करें:
  • Webpack आपके जावास्क्रिप्ट और एसेट्स को बंडल करता है।
  • Babel आपको आधुनिक जावास्क्रिप्ट फीचर्स का उपयोग करने की अनुमति देता है।
  • CopyPlugin फाइलों और डायरेक्टरीज़ को आपके बिल्ड डायरेक्टरी में कॉपी करता है।
  • File Loader किसी फाइल पर import/require() को एक URL में हल करता है और फाइल को आउटपुट डायरेक्टरी में डालता है।

चरण 4: वेबपैक कॉन्फ़िगर करना

अपने प्रोजेक्ट रूट में एक webpack.config.js फाइल बनाएं। इस फाइल में आपके एंट्री पॉइंट्स, आउटपुट कॉन्फ़िगरेशन, विभिन्न फाइल प्रकारों को लोड करने के लिए मॉड्यूल नियम और अतिरिक्त कार्यक्षमता के लिए प्लगइन्स को परिभाषित करना चाहिए। यहाँ आपके webpack.config.js का सेटअप इस प्रकार होना चाहिए:

चरण 5: मैनिफेस्ट और HTML फाइलों को समायोजित करना

सुनिश्चित करें कि आपका manifest.json और कोई भी HTML फाइलें स्क्रिप्ट्स और एसेट्स को सही ढंग से संदर्भित करती हैं। उदाहरण के लिए, स्क्रिप्ट्स dist फोल्डर में आउटपुट की जाएंगी, इसलिए पथों को तदनुसार अपडेट करें।

चरण 6: package.json में बिल्ड स्क्रिप्ट्स को एकीकृत करना

अपने प्रोजेक्ट को वेबपैक के साथ सेटअप करने और इसे पिछले चरणों में वर्णित के अनुसार कॉन्फ़िगर करने के बाद, आप npm स्क्रिप्ट्स का उपयोग करके बिल्ड और वॉच प्रक्रियाओं को स्वचालित करना चाहेंगे। अपनी package.json फाइल खोलें और scripts ऑब्जेक्ट के भीतर निम्नलिखित स्क्रिप्ट्स जोड़ें:
यहाँ प्रत्येक स्क्रिप्ट क्या करती है:
  • "build": आपके एक्सटेंशन को प्रोडक्शन मोड में बंडल करता है, आउटपुट को तैनाती के लिए ऑप्टिमाइज़ करता है। यह मोड मिनिफिकेशन और डेड कोड एलिमिनेशन जैसी ऑप्टिमाइजेशन को सक्षम करता है।
  • "watch": वेबपैक को विकास मोड में चलाता है और आपकी फाइलों में परिवर्तन के लिए देखता है, जब भी कोई फाइल संशोधित होती है तो प्रोजेक्ट को स्वचालित रूप से पुनः संकलित करता है। यह विकास के दौरान परिवर्तनों पर त्वरित प्रतिक्रिया के लिए सहायक होता है।

चरण 7: एक्सटेंशन का परीक्षण और निर्माण

अपने एक्सटेंशन को प्रोडक्शन के लिए बनाने के लिए, उपयोग करें:
यह कमांड --mode production फ्लैग के साथ वेबपैक को बुलाता है, आपके प्रोजेक्ट को तैनाती के लिए ऑप्टिमाइज़ करता है। विकास के लिए, आप वेबपैक को अपनी फाइलों को देखने और जब भी परिवर्तन का पता चलता है, तो पुनः संकलित करने के लिए कह सकते हैं:
यह विकास प्रक्रिया को सुगम बनाता है, क्योंकि आपको प्रत्येक परिवर्तन के बाद प्रोजेक्ट को मैन्युअल रूप से पुनः निर्माण करने की आवश्यकता नहीं होती है।

चरण 7: एक्सटेंशन का परीक्षण

Chrome में अपने एक्सटेंशन का परीक्षण करने के लिए:
  1. Chrome ब्राउज़र में chrome://extensions/ पर जाएँ।
  2. शीर्ष दाईं ओर “डेवलपर मोड” सक्षम करें।
  3. “लोड अनपैक्ड” पर क्लिक करें और अपने dist फोल्डर का चयन करें।
यह परीक्षण और विकास उद्देश्यों के लिए एक्सटेंशन को स्थानीय रूप से इंस्टॉल करेगा।