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 इसमें कई शक्तिशाली विशेषताएं हैं जैसे सीएसएस को संभालना, मॉड्यूल प्रबंधित करना, लोडर और प्लगइन्स का उपयोग करना, स्रोत कोड अनुकूलन और बहुत कुछ। Webpack इस उपकरण की क्षमताओं का पूरी तरह से लाभ उठाने के लिए आधिकारिक दस्तावेज़ का अन्वेषण करें ।