वेबपैक के साथ शुरुआत करना [उदाहरण परियोजना के साथ]

Webpack एक है मॉड्यूल बंडलर कि जटिल जावास्क्रिप्ट अनुप्रयोगों के निर्माण की सुविधा। रिएक्ट समुदाय ने इसे अपने मुख्य निर्माण उपकरण के रूप में चुना है, क्योंकि इसने गंभीर कर्षण प्राप्त किया है। वेबपैक है न तो पैकेज मैनेजर और न ही टास्क रनर चूंकि यह एक अलग (अधिक उन्नत) दृष्टिकोण का उपयोग करता है, लेकिन इसका लक्ष्य भी है डायनामिक बिल्ड प्रक्रिया सेट करें.

वेबपैक वैनिला जावास्क्रिप्ट के साथ काम करता है। आप इसका उपयोग कर सकते हैं एक आवेदन की स्थिर संपत्ति बंडल, छवियों, फोंट, स्टाइलशीट, लिपियों के रूप में जबकि एक ही फाइल में सभी आश्रितों का ख्याल रखना.

उदाहरण के लिए आपको एक साधारण ऐप या वेबसाइट बनाने के लिए वेबपैक की आवश्यकता नहीं होगी, जिसमें केवल एक जावास्क्रिप्ट और एक सीएसएस फ़ाइल और कुछ छवियां हैं, हालांकि यह एक के लिए जीवन रक्षक हो सकता है कई संपत्ति और निर्भरता के साथ अधिक जटिल अनुप्रयोग.

Webpack बनाम कार्य धावकों बनाम Browserify

तो, वेबपैक कैसे स्टैक करता है अन्य बिल्ड टूल की तुलना में जैसे ग्रंट, गल्प, या ब्राउज़राइज़?

ग्रंट और गल्प टास्क रनर हैं। उनकी कॉन्फ़िगरेशन फ़ाइल में, आप कार्य निर्दिष्ट करें, और कार्य धावक उन्हें निष्पादित करता है। एक कार्य धावक के वर्कफ़्लो मूल रूप से इस तरह दिखता है:

हालाँकि, Webpack एक है मॉड्यूल बंडलर जो पूरे प्रोजेक्ट का विश्लेषण करता है, एक निर्भरता पेड़ की स्थापना, तथा एक बंडल जावास्क्रिप्ट फ़ाइल बनाता है यह ब्राउज़र के लिए कार्य करता है.

Browserify कार्य धावकों की तुलना में Webpack के करीब है, क्योंकि यह भी है एक निर्भरता ग्राफ बनाता है लेकिन यह केवल ऐसा करता है जावास्क्रिप्ट मॉड्यूल के लिए. वेबपैक एक कदम आगे जाता है, और यह केवल स्रोत कोड बंडल नहीं करता है अन्य संपत्ति भी जैसे कि छवियाँ, स्टाइलशीट, फोंट, आदि.

यदि आप अधिक जानना चाहते हैं वेबपैक अन्य बिल्ड टूल की तुलना कैसे करता है, मैं आपको दो लेख सुझाता हूं:

1. एंड्रयू रे की वेबपैक: कब और क्यों प्रयोग करें अपने ब्लॉग पर
2. कोरी हाउस की ब्राउज़र बनाम वेबपैक freeCodeCamp पर (भयानक चित्रों के साथ)

ऊपर दिए गए दो चित्र प्रो रिएक्ट हैंडबुक की वेबपैक सामग्री, एक और संसाधन जो देखने लायक है.

वेबपैक की चार मुख्य अवधारणाएँ

वेबपैक है चार मुख्य विन्यास विकल्प कहलाते हैं “मूल अवधारणा” आपको विकास प्रक्रिया में परिभाषित करने की आवश्यकता होगी:

1. प्रवेश - प्रस्थान बिंदू निर्भरता ग्राफ (एक या अधिक जावास्क्रिप्ट फ़ाइलों).
2. उत्पादन - फ़ाइल जहाँ आप चाहते हैं आउटपुट को बंडल किया जाएगा (एक जावास्क्रिप्ट फ़ाइल).
3. लोडर - परिसंपत्तियों पर परिवर्तन उन्हें वेबपैक मॉड्यूल में बदल दें ताकि वे हो सकें निर्भरता ग्राफ में जोड़ा गया. उदाहरण के लिए, सीएसएस-लोडर सीएसएस फ़ाइलों के आयात के लिए प्रयोग किया जाता है.
4. प्लगइन्स - कस्टम क्रिया और कार्य बंडल पर प्रदर्शन किया. उदाहरण के लिए, i18n-webpack-प्लगइन बंडल में स्थानीयकरण एम्बेड करता है.

लोडर प्रति-फ़ाइल के आधार पर काम करते हैं संकलन होने से पहले. प्लगइन्स को बंडल कोड पर निष्पादित किया जाता है, संकलन प्रक्रिया के अंत में.

Webpack स्थापित करें

सेवा मेरे Webpack स्थापित करें, कमांड-लाइन खोलें, अपने प्रोजेक्ट फ़ोल्डर में जाएँ, और निम्न कमांड चलाएँ:

 एनपीएम init 

यदि आप स्वयं कॉन्फ़िगरेशन नहीं करना चाहते हैं, तो आप npm बना सकते हैं आबाद करना package.json डिफ़ॉल्ट मानों के साथ फ़ाइल करें निम्नलिखित आदेश के साथ:

 npm init -y 

अगला, वेबपैक स्थापित करें:

 npm वेबपैक स्थापित करें - सेव-देव 

यदि आपने डिफ़ॉल्ट मानों का उपयोग किया है तो यह कैसे आपका है package.json फ़ाइल को अब जैसा दिखना चाहिए (गुण एक अलग क्रम में हो सकते हैं):

 "नाम": "_tests", "संस्करण": "1.0.0", "विवरण": "", "मुख्य": "webpack.config.js", "निर्भरता": "webpack": "^ 3.6 .0 "," अवमूल्यन ": " वेबपैक ":" ^ 3.6.0 "," लिपियाँ ": " परीक्षण ":" प्रतिध्वनि ": त्रुटि: कोई परीक्षण निर्दिष्ट नहीं \" && से बाहर निकलें 1 "," खोजशब्द ": []," लेखक ":" "," लाइसेंस ":" आईएससी "" 

कॉन्फ़िगरेशन फ़ाइल बनाएँ

आपको एक बनाने की आवश्यकता है webpack.config.js फ़ाइल परियोजना के रूट फ़ोल्डर में. इस कॉन्फ़िगरेशन फ़ाइल की केंद्रीय भूमिका है, क्योंकि यह वह जगह है जहाँ आप करेंगे चार मुख्य अवधारणाओं को परिभाषित करें (प्रवेश बिंदु, आउटपुट, लोडर, प्लगइन्स).

webpack.config.js फ़ाइल एक कॉन्फ़िगरेशन ऑब्जेक्ट रखता है आपको कौन से गुणों को निर्दिष्ट करने की आवश्यकता है। इस लेख में, हम उन चार गुणों को निर्दिष्ट करेंगे जो चार मुख्य अवधारणाओं के अनुरूप (प्रवेश, उत्पादन, मॉड्यूल, तथा लगाना), लेकिन config ऑब्जेक्ट में अन्य गुण भी हैं.

1. प्रवेश बिंदु बनाएँ

आप ले सकते हैं एक या एक से अधिक प्रवेश बिंदु. आपको उन्हें परिभाषित करने की आवश्यकता है प्रवेश संपत्ति.

में निम्नलिखित कोड स्निपेट डालें webpack.config.js फ़ाइल। यह एक प्रविष्टि बिंदु निर्दिष्ट करता है:

 मॉड्यूल .exports = प्रविष्टि: "./src/script.js"; 

एक से अधिक प्रवेश बिंदुओं को निर्दिष्ट करने के लिए जिनका आप उपयोग कर सकते हैं या तो सरणी या ऑब्जेक्ट सिंटैक्स.

आपके प्रोजेक्ट फ़ोल्डर में, कोई नया बनाएं src फ़ोल्डर और ए script.js इसके अंदर फाइल करें. यह आपका होगा प्रवेश बिंदु. परीक्षण प्रयोजनों के लिए, बस एक स्ट्रिंग रखें इसके अंदर। मैंने निम्नलिखित का उपयोग किया (हालांकि, आप एक और अधिक दिलचस्प का उपयोग कर सकते हैं):

 const ग्रीटिंग = "हाय। मैं एक वेबपैक स्टार्टर प्रोजेक्ट हूँ।"; document.write (अभिवादन); 

2. आउटपुट को परिभाषित करें

आप ले सकते हैं केवल एक आउटपुट फ़ाइल. वेबपैक इस फाइल में सभी संपत्तियों को बंडल करता है। आपको कॉन्फ़िगर करने की आवश्यकता है उत्पादन निम्नलिखित तरीके से संपत्ति:

 const पथ = आवश्यकता ("पथ"); mod.exports = entry: "./src/script.js", आउटपुट: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'); 

फ़ाइल का नाम संपत्ति परिभाषित करता है बंडल फ़ाइल का नाम, जबकि पथ संपत्ति निर्देशिका का नाम निर्दिष्ट करता है. ऊपर दिए गए उदाहरण से निर्माण होगा /dist/bundle.js फ़ाइल.

हालांकि यह अनिवार्य नहीं है, यह बेहतर है उपयोग path.resolve () तरीका जब आप परिभाषित करते हैं पथ संपत्ति, के रूप में सटीक मॉड्यूल संकल्प सुनिश्चित करता है (आउटपुट का पूर्ण पथ अलग-अलग वातावरण में अलग-अलग नियमों के अनुसार बनाया गया है, मॉड्यूल रिज़ॉल्यूशन इस विसंगति को हल करता है)। यदि तुम प्रयोग करते हो path.resolve, आपको की आवश्यकता होती है पथ नोड मॉड्यूल के शीर्ष पर है webpack.config.js फ़ाइल.

3. लोडर जोड़ें

सेवा मेरे लोडर जोड़ें, आपको परिभाषित करने की आवश्यकता है मॉड्यूल संपत्ति। नीचे, हम जोड़ते हैं कोलाहल-लोडर यह आपको अनुमति देता है सुरक्षित रूप से ECMAScript 6 सुविधाओं का उपयोग करें अपनी JS फाइलों में:

 const पथ = आवश्यकता ("पथ"); mod.exports = entry: "./src/script.js", आउटपुट: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), मॉड्यूल: rules: [test : / END.js$/, बहिष्कृत: / (नोड_modules | bower_compenders) /, का उपयोग करें: लोडर: "बेबल-लोडर", विकल्प: presets: ["env"]; 

कॉन्फ़िगरेशन मुश्किल लग सकता है लेकिन यह सिर्फ कॉपी-पेस्ट किया गया है बैबल लोडर का प्रलेखन. अधिकांश लोडर या तो एक रीडमी फ़ाइल या किसी प्रकार के प्रलेखन के साथ आते हैं, इसलिए आप हमेशा (लगभग) उन्हें ठीक से कॉन्फ़िगर करने का तरीका जान सकते हैं। और, वेबपैक डॉक्स में एक पेज भी होता है जो बताते हैं कैसे कॉन्फ़िगर करें module.rules.

आप जोड़ सकते हो आप की जरूरत के रूप में कई लोडर के रूप में, यहाँ एक पूरी सूची है। ध्यान दें कि आपको भी इसकी आवश्यकता है प्रत्येक लोडर को npm के साथ स्थापित करें उन्हें काम करने के लिए। बैबल लोडर के लिए, आपको एनपीएम के साथ आवश्यक नोड पैकेज स्थापित करने की आवश्यकता है:

 npm install --save-dev babel-loader बेबल-कोर बेबल-प्रीसेट-एनव वेबपैक 

अगर आपकी नजर है package.json फ़ाइल, आप देखेंगे कि एन.पी.एम. में तीन बैबेल-संबंधित पैकेज जोड़े गए devDependencies संपत्ति, ये ES6 संकलन का ध्यान रखेंगे.

4. प्लगइन्स जोड़ें

सेवा मेरे प्लगइन्स जोड़ें, आपको निर्दिष्ट करने की आवश्यकता है प्लग-इन संपत्ति। साथ ही, आपको करना भी होगा की आवश्यकता होती है एक के बाद एक प्लगइन्स, के रूप में वे बाहरी मॉड्यूल हैं.

हमारे उदाहरण में, हम दो वेबपैक प्लगइन्स जोड़ते हैं: द HTML वेबपैक प्लगइन और यह वेबपैक प्लग-इन प्री लोड करें. Webpack एक है अच्छा प्लगइन पारिस्थितिकी तंत्र, आप यहां पूरी सूची ब्राउज़ कर सकते हैं.

नोड मॉड्यूल के रूप में प्लगइन्स की आवश्यकता होती है, दो नए स्थिरांक बनाएं: HtmlWebpackPlugin तथा PreloadWebpackPlugin तथा उपयोग की आवश्यकता होती है () समारोह.

 const पथ = आवश्यकता ("पथ"); const HtmlWebpackPlugin = आवश्यकता ("html-webpack-plugin"); const PreloadWebpackPlugin = आवश्यकता ("प्रीलोड-वेबपैक-प्लगइन"); mod.exports = entry: "./src/script.js", आउटपुट: filename: "bundle.js", path: path.resolve (__ dirname, 'dist'), मॉड्यूल: rules: [test ः (), नया PreloadWebpackPlugin ()]; 

जैसे लोडर के मामले में आपको भी करना होगा npm के साथ वेबपैक प्लगइन्स स्थापित करें. उदाहरण में दो प्लगइन्स को स्थापित करने के लिए, अपनी कमांड लाइन में निम्नलिखित दो कमांड चलाएं:

 npm html-webpack-plugin --save-dev npm install --save-dev प्रीलोड-वेबपैक-प्लगइन स्थापित करें 

अगर आप अपनी जाँच करें package.json अब फाइल करें, आप देखेंगे कि एन.पी.एम. में दो प्लगइन्स को जोड़ा devDependencies संपत्ति.

वेबपैक चलाएं

सेवा मेरे निर्भरता पेड़ बनाएँ तथा बंडल का उत्पादन, कमांड लाइन में निम्नलिखित कमांड चलाएँ:

 webpack 

आमतौर पर एक या दो मिनट लगते हैं प्रोजेक्ट बनाने के लिए वेबपैक के लिए। जब पूरा हो जाए, तो आपको अपने CLI में एक समान संदेश दिखाई देगा:

अगर सब कुछ सही Webpack चला गया एक बनाया जिले फ़ोल्डर अपने प्रोजेक्ट की जड़ में और दो बंडल फाइलें रखीं (bundle.js तथा index.html) इसके अंदर.

गितुब रेपो

यदि आप पूरी परियोजना की जाँच, डाउनलोड, या कांटा करना चाहते हैं, तो हमारे Github repo पर एक नज़र डालें.