Webpack JavaScript (Node.js) पूर्ण गाइड: उदाहरण और सेटअप

Webpack क्या है और इसकी आवश्यकता क्यों है?

Webpack एक शक्तिशाली और लचीला मॉड्यूल बंडलर (module bundler) है जो JavaScript एप्लिकेशन के लिए Node.js वातावरण में काम करता है। इसका मुख्य काम कई फाइलों (JavaScript, CSS, इमेज, फॉन्ट और अन्य संसाधनों) को लेना, उनकी निर्भरताओं का विश्लेषण करना और उन्हें एक या अधिक ऑप्टिमाइज़्ड बंडल (bundle) में बदलना है, जो ब्राउज़र में उपयोग के लिए तैयार हों।

आधुनिक वेब डेवलपमेंट में एप्लिकेशन शायद ही कभी एक ही फाइल से बने होते हैं। आमतौर पर कोड कई मॉड्यूल में बंटा होता है, बाहरी लाइब्रेरी (npm पैकेज), प्रीप्रोसेसर (SASS, LESS), TypeScript, JSX और अन्य तकनीकों का उपयोग किया जाता है। ब्राउज़र हमेशा इतनी सारी फाइलों और निर्भरताओं को कुशलतापूर्वक संभाल नहीं सकते। यहीं पर Webpack काम आता है।

Webpack के मुख्य कार्य:

• मॉड्यूल संयोजन: सभी JavaScript फाइलों और उनकी निर्भरताओं को एक या अधिक बंडल में जोड़ना।
• संसाधन रूपांतरण: फाइलों को बदलने के लिए लोडर (loaders) का उपयोग (जैसे SCSS को CSS में, TypeScript को JavaScript में, इमेज को base64 में)।
• ऑप्टिमाइजेशन: कोड मिनिफिकेशन, अनुपयोगी कोड हटाना (tree shaking), लेज़ी लोडिंग के लिए कोड को चंक (code splitting) में विभाजित करना।
• वातावरण प्रबंधन: अलग-अलग सेटिंग्स के साथ डेवलपमेंट (development) और प्रोडक्शन (production) मोड का समर्थन।
• Dev Server: हॉट मॉड्यूल रिप्लेसमेंट (Hot Module Replacement — HMR) के साथ बिल्ट-इन डेवलपमेंट सर्वर।

Webpack आधुनिक JavaScript प्रोजेक्ट्स, विशेष रूप से React, Vue.js और Angular एप्लिकेशन के लिए डी-फैक्टो मानक है।

Webpack इंस्टॉलेशन

Webpack के साथ काम करने के लिए Node.js (संस्करण 12 या उच्चतर) और पैकेज मैनेजर npm (या yarn) आवश्यक है। इंस्टॉलेशन npm के माध्यम से किया जाता है। प्रत्येक प्रोजेक्ट में Webpack को स्थानीय रूप से इंस्टॉल करने की सिफारिश की जाती है।

चरण 1: प्रोजेक्ट इनिशियलाइज़ेशन

mkdir my-webpack-project
cd my-webpack-project
npm init -y

चरण 2: कोर पैकेज इंस्टॉल करें

दो मुख्य पैकेज इंस्टॉल करें: webpack और webpack-cli (कमांड लाइन इंटरफ़ेस)।

npm install --save-dev webpack webpack-cli

चरण 3: webpack-dev-server इंस्टॉल करें (वैकल्पिक, डेवलपमेंट के लिए)

npm install --save-dev webpack-dev-server

चरण 4: लोडर और प्लगइन इंस्टॉल करें (CSS के लिए उदाहरण)

npm install --save-dev style-loader css-loader

इंस्टॉलेशन के बाद package.json फाइल में devDependencies सेक्शन में इंस्टॉल किए गए पैकेज दिखाई देंगे।

कोड उदाहरण के साथ त्वरित शुरुआत

एक सरल प्रोजेक्ट बनाएं जो Webpack की बुनियादी कार्यप्रणाली को प्रदर्शित करता है।

प्रोजेक्ट संरचना:

my-webpack-project/
├── dist/          # बिल्ड फाइलों के लिए फोल्डर (स्वचालित रूप से बनता है)
├── src/           # स्रोत कोड
│   ├── index.js   # एंट्री पॉइंट
│   └── style.css  # स्टाइल
├── index.html     # HTML फाइल
├── package.json
└── webpack.config.js  # Webpack कॉन्फ़िगरेशन

1. फाइल src/index.js बनाएं:

// src/index.js
import './style.css';

function greet(name) {
    console.log(`नमस्ते, ${name}!`);
}

greet('Webpack');

2. फाइल src/style.css बनाएं:

/* src/style.css */
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

3. फाइल index.html बनाएं:

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <title>Webpack डेमो</title>
</head>
<body>
    <script src="dist/bundle.js"></script>
</body>
</html>

4. फाइल

पुस्तकालय में भी

C++ के लिए कार्य कतारें: पुस्तकालयों का अवलोकन और कार्यान्वयन PHP में JWT टोकन: firebase/php-jwt लाइब्रेरी और पूर्ण गाइड C++ में परीक्षण: कोड जाँच के लिए फ्रेमवर्क और उपकरण जावा में Excel के साथ काम: Apache POI और विकल्प क्रिप्टोग्राफी Python: एन्क्रिप्शन और सुरक्षा की पूरी गाइड