वेबपैक 5 के लिए गाइड

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

आज, जब मॉड्यूल बंडलिंग के पारिस्थितिकी तंत्र की बात आती है, तो जो उपकरण हर किसी की जुबान पर सबसे ज्यादा रहता है, वह वेबपैक है।

मेरे लिए, वेबपैक से निपटना काफी डराने वाला हुआ करता था, मैं इसके बजाय टूल्स की ओर भागना पसंद करूंगा vue-create यदि मुझे Vue प्रोजेक्ट स्थापित करने की आवश्यकता है या create-react-app वेबपैक के साथ काम करते समय मुझे महसूस हुई सभी जटिलताओं से बचने के लिए, एक रिएक्ट ऐप सेट करना होगा।

यदि आप बिल्कुल वैसे ही हैं जैसे मैं हुआ करता था, यानी, आपको लगता है कि बेबेल, एसएएसएस, वीयू या टाइपस्क्रिप्ट के साथ स्क्रैच से वेबपैक स्थापित करना काफी भ्रमित करने वाला हो सकता है, तो यह गाइड आपके लिए है!

इस गाइड में, आप सीखेंगे कि वेबपैक का उपयोग करके फ्रंटएंड वातावरण कैसे बनाया जाए, और जीवन की सभी चीजों की तरह, जिस क्षण आप खुद को सीखने का मौका देंगे और एक अवधारणा को अच्छी तरह से समझना सुनिश्चित करेंगे, आपको एहसास होगा कि यह बहुत डरावना नहीं है आख़िरकार।

इसमें बहुत सारे गतिशील भागों के साथ, हम आपको वेबपैक से परिचित कराने के लिए विभिन्न मूलभूत अवधारणाओं को सीखेंगे और व्यापक रूप से लोकप्रिय मॉड्यूल बंडलर के साथ किसी भी प्रोजेक्ट को स्क्रैच से सेट करते समय आपको उठने और चलाने में मदद करने के लिए एक वेबपैक बॉयलरप्लेट का निर्माण करेंगे।

वेबपैक क्या है?

भले ही वेबपैक कितना भी जटिल क्यों न लगे, इसका मूल लक्ष्य बहुत सीधा रहता है; इसमें विभिन्न परिसंपत्तियों, विभिन्न फ़ाइलों का एक समूह लगता है - विभिन्न प्रकार की; जावास्क्रिप्ट, छवियां, एसएएसएस, पोस्टसीएसएस, जो भी फ़ाइल हो, और यह उन्हें पूरी तरह से फाइलों के एक छोटे समूह में जोड़ती है (उन्हें बंडल करती है), शायद एक फ़ाइल, या यह आपके जावास्क्रिप्ट के लिए एक फ़ाइल हो सकती है, स्टाइलशीट के लिए एक फ़ाइल, एक तृतीय-पक्ष JavaScript के लिए, और एक अनुक्रमणिका JavaScript फ़ाइल के लिए।

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

के अनुसार आधिकारिक गिटहब पेज:

“जावास्क्रिप्ट और दोस्तों के लिए एक बंडलर। कई मॉड्यूल को कुछ बंडल संपत्तियों में पैक करता है। कोड विभाजन मांग पर एप्लिकेशन के कुछ हिस्सों को लोड करने की अनुमति देता है। "लोडर" के माध्यम से, मॉड्यूल CommonJs, AMD, ES6 मॉड्यूल, CSS, Images, JSON, कॉफ़ीस्क्रिप्ट, LESS, ... और आपकी कस्टम सामग्री हो सकते हैं।

वेबपैक में बहुत कुछ है, और इस गाइड में इस बिंदु पर, हम मुख्य वेबपैक अवधारणाओं से परिचित होने वाले हैं।

प्रोजेक्ट सेटअप

इस ट्यूटोरियल के लिए अपनी पसंदीदा निर्देशिका में, एक नया फ़ोल्डर बनाएं: webpack-app, वेबपैक परियोजना के आवास के लिए।

$ mkdir webpack-app

इसके बाद, आइए प्रोजेक्ट निर्देशिका से टर्मिनल में निम्नलिखित कमांड चलाकर प्रोजेक्ट फ़ोल्डर में Node.js को आरंभ करें:

$ cd webpack-app

$ npm init --yes

यह एक पैदा करेगा package.json फ़ाइल जो एप्लिकेशन निर्भरता को ट्रैक करना संभव और आसान बनाती है।

अब जब हमारे प्रोजेक्ट में नोड आरंभ हो गया है, तो हम उन विभिन्न पैकेजों को स्थापित करना शुरू कर सकते हैं जिनकी हमें आवश्यकता होगी। आगे बढ़ने के लिए, आइए कोर पैकेज स्थापित करें: webpack और webpack-cli.

$ yarn add --dev webpack webpack-cli
# Or
$ npm install --save-dev webpack webpack-cli

RSI webpack पैकेज हमें ब्राउज़र में उपयोग के लिए बंडल किए गए जावास्क्रिप्ट मॉड्यूल का उत्पादन करने की अनुमति देगा, जबकि webpack-cli एक उपकरण है जो कमांड का एक सेट प्रदान करता है जो डेवलपर्स के लिए कस्टम वेबपैक प्रोजेक्ट को जल्दी से सेट करना आसान बनाता है।

आरंभ करने के लिए, आइए रूट डायरेक्टरी में दो नए फ़ोल्डर बनाएं src और dist. में src फ़ोल्डर, एक बनाएँ index.js फ़ाइल जो हमारे एप्लिकेशन के लिए रूट फ़ाइल के रूप में काम करेगी।

प्रोजेक्ट को कॉन्फ़िगर करना

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

$ touch webpack.config.js

मोड

मोड उस वातावरण को परिभाषित करता है जहां परियोजना वर्तमान में संचालित होती है। इसकी संपत्ति का डिफॉल्ट है none, लेकिन दोनों में से किसी एक पर सेट किया जा सकता है production or development, लेकिन आप वास्तव में कभी भी उपयोग नहीं करेंगे none एक विधा के रूप में. वास्तव में, जब मोड अनसेट रहता है तो क्या होता है, वेबपैक उपयोग करता है production अनुकूलन के लिए फ़ॉलबैक विकल्प के रूप में।

- development मोड के रूप में सेट करने पर, हम त्रुटियों का पता लगाने और यह जानने के लिए आसानी से स्रोत मैपिंग का उपयोग करते हैं कि मूल फ़ाइलें कहां थीं।

- production मोड के रूप में सेट करें, प्राथमिकता फ़ाइलों को सिकोड़ना, अनुकूलित करना और छोटा करना है:

const path = require("path");

module.exports = {
  mode: "development", 
};

प्रवेश

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

बेशक, सिंगल पेज एप्लिकेशन में, वह अंदर इंडेक्स जावास्क्रिप्ट फ़ाइल होगी src फ़ोल्डर, और हमारे मामले में, यह है src/index.js फ़ाइल:

const path = require("path");

module.exports = {
  
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
};

उत्पादन

अंत में, शुरुआत के लिए, हमें यह घोषित करने के लिए एक आउटपुट की भी आवश्यकता होगी कि एप्लिकेशन बंडलिंग प्रक्रिया पूरी होने के बाद हम फ़ाइलों, संपत्तियों, बंडलों और अन्य एप्लिकेशन संसाधनों को कहां आउटपुट करना चाहते हैं। हमारे मामले में, हम सेट करते हैं path आउटपुट के लिए dist फ़ोल्डर, लेकिन आप चाहें तो इसका नाम बदल सकते हैं, शायद deploy, build, या जो भी नाम आपको पसंद हो।

हमें भी सेट करना होगा filename आउटपुट बंडल का नाम परिभाषित करने के लिए। एक सामान्य नाम परिपाटी है [name].bundle.js:

const path = require("path");

module.exports = {
  

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.bundle.js", 
    
    
    filename: "[name].bundle.js", 
  },
};

अब हमने किसी एप्लिकेशन को बंडल करने के लिए आवश्यक न्यूनतम कॉन्फ़िगरेशन सेट कर लिया है, जिसे हम चला सकते हैं package.json

इसे प्राप्त करने के लिए, हमें पूर्वनिर्धारित स्क्रिप्ट ऑब्जेक्ट को अद्यतन करने की आवश्यकता है package.json. आइए एक नया कमांड बनाएं जिसका नाम है build, जो होगा webpack इसके मूल्य के रूप में. इस कमांड को सेव करके, अब हम वेबपैक चला सकते हैं।

लेकिन इससे पहले कि हम चलाएं build कमांड, आइए हम शीघ्रता से इसमें जावास्क्रिप्ट कोड की कुछ पंक्तियाँ शामिल करें src/index.js फ़ाइल:

console.log("Hello world! My name is Uche Azubuko.");

इसके बाद, हम टर्मिनल से निम्नलिखित कमांड के साथ वेबपैक चलाते हैं:

$ yarn build
#
$ npm run build

यह आउटपुट:

$ webpack
asset main.bundle.js 1.24 KiB [emitted] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 98 ms
Done in 0.94s.

मूलतः, जब हम चलाते हैं build आदेश, webpack वह आदेश है जो हुड के नीचे चलाया जाता है; हमारे द्वारा परिभाषित कॉन्फ़िगरेशन सेटिंग्स पढ़ी जाएंगी और प्रवेश बिंदु, यानी app.js बंडल हो जाता है, पढ़ा जाता है और आउटपुट होता है main.bundle.js में dist फ़ोल्डर.

यदि हम विभिन्न बिंदुओं का निर्माण करते रहें, तो हमें विभिन्न नाम मिलेंगे, लेकिन यदि हम निर्धारित करते हैं filename सेवा मेरे [name].[contenthash].js, हर बार जब हमारा एप्लिकेशन बंडल पूरा हो जाता है, तो हम अनुपालन फ़ाइल के लिए एक अद्वितीय नाम प्राप्त करना सुनिश्चित करेंगे।

अब, जब हम दोबारा ऐप बनाते हैं, तो हमें उस फ़ाइल के लिए एक अद्वितीय नाम मिलता है जो आउटपुट होता है dist फ़ोल्डर, जैसे main.96f31f8d4c5ec9be4552.js:

$ yarn build
# Or
$ npm run build

यह आउटपुट:

$ webpack
asset main.96f31f8d4c5ec9be4552.js 1.24 KiB [emitted] [immutable] (name: main)
./src/index.js 54 bytes [built] [code generated]
webpack 5.75.0 compiled successfully in 88 ms
Done in 0.92s.

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

इस प्रकार, सबसे अच्छी बात यह है कि सफाई करना है dist हर बार एप्लिकेशन बंडलिंग प्रक्रिया पूरी होने पर निर्देशिका।

की स्थापना करके सफ़ाई प्राप्त की जा सकती है clean में विकल्प output करने के लिए वस्तु true, इसलिए है कि webpack.config.js यह अद्यतित है:

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
};

अब, हर बार जब हम चलाते हैं build आज्ञा, dist किसी नई फ़ाइल को इसमें भेजने से पहले निर्देशिका को साफ़ किया जाता है।

तो यह इस बारे में है entry और output; बंडलिंग के लिए फ़ाइलें कहां से प्राप्त करें और बंडलिंग के बाद फ़ाइलें कहां रखें।

कॉन्फ़िगरेशन फ़ाइल के साथ दो अन्य मुख्य विकल्प हैं जिन्हें हम शामिल कर सकते हैं: loaders, तथा plugins.

प्लगइन्स

प्लगइन्स को कार्यशील देखने के लिए, हम इसका उपयोग करेंगे HTMLWebpackPlugin जिसके द्वारा स्थापित करके गतिशील रूप से HTML फ़ाइलें बनाना संभव हो जाता है html-webpack-plugin पैकेज:

$ yarn add --dev html-webpack-plugin
# Or
$ npm install --save-dev html-webpack-plugin

फिर कॉन्फ़िगरेशन फ़ाइल के प्लगइन्स अनुभागों में, हम पास करते हैं title बनाई जाने वाली HTML फ़ाइल का, और a filename:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    main: path.resolve(__dirname, "src/index.js"),
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js",
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Testing html file",
      filename: "index.html",
    }),
  ],
};

अब, जब हम चलाते हैं build कमांड, एक HTML फ़ाइल बनाई जाती है dist फ़ोल्डर. और इसमें index.html फ़ाइल, आप देखेंगे कि अद्वितीय js जो फ़ाइल बंडल की गई थी वह स्वचालित रूप से जोड़ दी गई है:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing html file</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="main.b908ea8ce529b415a20a.js"></script></head>
  <body>
  </body>
</html>

यदि आपकी इच्छा अपने उपयोग के लिए एक टेम्पलेट तैयार करने की है index.html में पेज dist फ़ोल्डर, आप इसे संलग्न करके प्राप्त कर सकते हैं template में विकल्प plugins कॉन्फ़िग फ़ाइल का विकल्प, फिर एक टेम्पलेट फ़ाइल को परिभाषित करें src फ़ोल्डर जिसका मान होगा template विकल्प:

module.exports = {
  

  plugins: [
    new HtmlWebpackPlugin({
      title: "Testing html file",
      filename: "index.html",
      template: path.resolve(__dirname, "src/template.html"),
    }),
  ],
};

तब में template.html फ़ाइल, हम कुछ मार्कअप परिभाषित कर सकते हैं। ध्यान देने योग्य एक बात यह है कि इस टेम्प्लेट फ़ाइल की उन सभी चीज़ों तक पहुंच है, जिन्हें हमने इसमें परिभाषित किया है new HtmlWebpackPlugin वस्तु, जैसे title, filename, जिसे हम फ़ाइल में आयात कर सकते हैं:

// src/template.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <header>
      <h1>Template File of </h1>
    </header>
  </body>
</html>

अब, जब हम अपना ऐप दोबारा बनाते हैं, तो हमें जेनरेटेड में शीर्षक मिलता है dist/index.html "एचटीएमएल फ़ाइल का परीक्षण" होना:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testing html file</title>
  <script defer src="main.b908ea8ce529b415a20a.js"></script></head>
  <body>
    <header>
      <h1>Template File of Testing html file</h1>
    </header>
  </body>
</html>

लोडर

डिफ़ॉल्ट रूप से, वेबपैक जावास्क्रिप्ट और JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) को समझता है, लेकिन यह नहीं जानता कि एक छवि फ़ाइल क्या है, या HTML, CSS, SASS, या SVG फ़ाइलें, अन्य प्रकार की फ़ाइलों सहित; यह नहीं जानता कि उन्हें कैसे संभालना है। इस चुनौती के कारण, लोडर आते हैं।

यदि आपके पास HTML, CSV, SVG, CSS, SASS, या छवि फ़ाइलें हैं, तो आपके पास इन सभी विभिन्न प्रकार की फ़ाइलों के लिए लोडर हो सकते हैं जो स्रोत फ़ोल्डर में देखेंगे, उन्हें ढूंढेंगे, और फिर उन्हें मॉड्यूल में बदल देंगे जिन्हें आयात किया जा सकता है जावास्क्रिप्ट द्वारा.

आइए इस एसवीजी फ़ाइल को इसमें संलग्न करके एक विशिष्ट उदाहरण लें src फ़ोल्डर और एक सीएसएस फ़ाइल भी। यदि हम इसे लाना चाहते हैं और इसे अच्छी तरह से बंडल करना चाहते हैं, तो हम एक लोडर का उपयोग करेंगे - हमारा index.js फ़ाइल, यहां दो काम करने होंगे; index.js फ़ाइल प्रकार की फ़ाइल को लोड करने के लिए फ़ाइल एक लोडर के रूप में कार्य करती है, फिर यह लोडर इसमें आयात हो जाता है dist जब ऐप को बंडल किया जाता है तो निर्देशिका, ताकि यह एप्लिकेशन के निर्भरता ग्राफ का हिस्सा बन जाए।

वेबपैक के साथ सीएसएस फ़ाइलें लोड हो रही हैं

हम एक बना सकते हैं main.css में src फ़ोल्डर:

// src/main.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

फिर अपडेट करें index.js:

import style from "./main.css";

console.log("Hello world! My name is Uche Azubuko!");

में loaders कॉन्फ़िगरेशन फ़ाइल में विकल्प, अब हम बंडलिंग प्रक्रिया के दौरान विभिन्न प्रकार की फ़ाइलों को मॉड्यूल के रूप में लोड करने के लिए नियम निर्धारित कर सकते हैं:

module.exports = {
  

  module: {
    rules: [{ test: /.css$/, use: ["style-loader", "css-loader"] }],
  },
};

यहां, हमने एक नियम बनाया है जो किसी भी सीएसएस फ़ाइल को लोड करने के लिए लोडर की एक सरणी प्रदान करता है src फ़ोल्डर; दाएँ से बाएँ पढ़ा जा रहा है। सीएसएस-लोडर फ़ाइल को ढूंढता है, इसे एक मॉड्यूल में बदल देता है और इसे जावास्क्रिप्ट को देता है, जबकि style-loader आयातित मॉड्यूल लेता है, और इसे इसमें इंजेक्ट करता है dist/index.html फ़ाइल.

वे देव निर्भरताएँ हैं, इस प्रकार, हमें उन्हें एप्लिकेशन में भी इंस्टॉल करना होगा:

$ yarn add --dev style-loader css-loader
# Or
$ npm install --save-dev style-loader css-loader

जब हम चलाते हैं build कमांड, बंडलिंग प्रक्रिया से परिणामी जावास्क्रिप्ट फ़ाइल अब सीएसएस फ़ाइल के बारे में जानती है और इसे इसमें इंजेक्ट करती है dist एप्लिकेशन को।

मान लीजिए कि आप चाहते हैं कि आप ब्राउज़र पर अपने एप्लिकेशन का विकास संस्करण लॉन्च करें। सबसे पहले, हम इसमें एक और विकल्प जोड़ते हैं scripts में वस्तु package.json फ़ाइल:

"dev": webpack serve

आदेश serve के साथ जोड़ा जाता है webpack. यह हर चीज़ का अनुपालन करता है और उसे स्मृति में रखता है। कॉन्फ़िगरेशन फ़ाइल में, हम फिर दो विकल्प जोड़ते हैं: devtool और devServer. ये ऐसे विकल्प हैं जो सर्वर पर काम को इष्टतम बनाने में मदद करते हैं।

डेवटूल्स

RSI devtool कॉन्फिग विकल्प नियंत्रित करता है कि संकलन के दौरान स्रोत मानचित्र कैसे और क्या उत्पन्न होते हैं। सोर्स मैपिंग इस बात पर नज़र रखती है कि सभी सामग्री कहाँ से आई है, और ब्राउज़र को यह बताती है कि कोई संभावित त्रुटि कहाँ से आ रही है:

module.exports = {
  

  devtool: "inline-source-map",
};

देवसर्वर

यह उस सर्वर के लिए सेटिंग को परिभाषित करता है जिसे हम सेट अप कर रहे हैं, और हम परिभाषित करते हैं कि ऐप का आधार कहां से चलना चाहिए। हम इसका उपयोग करके हॉट मॉड्यूल रीलोडिंग (HMR) को भी परिभाषित करते हैं hot विकल्प, पोर्ट नंबर सेट करें जिसमें ऐप चलेगा, का उपयोग करके परिवर्तनों पर नज़र रखें watchFiles इसका मान निर्धारित करके src फ़ोल्डर, का उपयोग करें open विकास संस्करण लॉन्च करने के लिए संकलन प्रक्रिया पूरी होने पर तुरंत ब्राउज़र खोलने का विकल्प, और का उपयोग करके अपनी पसंद का पोर्ट नंबर सेट करें port विकल्प:

module.exports = {
  /* ... */

  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    port: 5001, // default is often 8080
    open: true,
    hot: true,
    watchFiles: [path.resolve(__dirname, 'src')],
  },
};

परिभाषित के अतिरिक्त devServer विकल्प, हमें भी इंस्टॉल करना होगा webpack-dev-server एक देव निर्भरता के रूप में पैकेज, जो मदद करने के लिए है।

अब जब हम चलाते हैं dev कमांड, ऐप को ब्राउज़र पर प्रस्तुत किया जाता है localhost:5001, वह सभी सामग्री दिखा रहा है जिसे इसमें इंजेक्ट किया गया है dist/index.html बंडलिंग प्रक्रिया के दौरान:

हॉट मॉड्यूल प्रतिस्थापन सक्षम होने के साथ, यदि आप विकास के दौरान कोई बदलाव करते हैं, तो परिवर्तनों को सहेजने पर यह तुरंत ब्राउज़र पर प्रतिबिंबित होता है।

लोड हो रहा है छवियाँ

वेबपैक के संस्करण 5 में एक और चीज़ जिसे आसान बना दिया गया है वह है बिल्ट-इन asset/resource लोडर, जिसका उपयोग हम बंडलिंग प्रक्रिया के दौरान छवियों को ऐप में इंजेक्ट करने के लिए जांचने के लिए कर सकते हैं:

module.exports = {
  

  module: {
    
    { test: /.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: "asset/resource" },
  },
};

यहां, हमने निम्नलिखित फ़ाइल प्रकार से जुड़ी सभी फ़ाइलों को ढूंढने और उन्हें इसमें इंजेक्ट करने के लिए एक चेक लिखा है dist बंडलिंग के दौरान फ़ोल्डर: एसवीजी, आईसीओ, पीएनजी, वेबपी, जेपीजी, जीआईएफ, जेपीईजी।

अपडेट src/index.html आपके द्वारा पहले डाउनलोड की गई एसवीजी फ़ाइल को शामिल करने के लिए:

import style from "./main.css";
import logo from "./logo.svg";

console.log("Hello world! My name is Uche Azubuko!");

अब, चलाएँ dev कमांड, और एसवीजी फ़ाइल अब संकलित होनी चाहिए और बंडलिंग प्रक्रिया सफल होनी चाहिए।

आमतौर पर, हम एक घटक फ़ाइल के भीतर एसवीजी का उपयोग करना चाहेंगे। उसके लिए, आइए हम एक बनाएं component.js में दायर src फ़ोल्डर. उसमें, हम एक मॉड्यूल बनाएंगे जिसका उपयोग पृष्ठ पर सामग्री बनाने के लिए किया जाएगा:

import logo from "./logo.svg";

function component() {
  let main = document.createElement("main");
  let para = document.createElement("p");
  let img = document.createElement("img");
  main.append(para);
  para.append(img);
  img.src = logo;
  img.alt = "logo for the app";
  return main;
}

export default component;

छवि का उपयोग करने के लिए, पहला कदम इसे फ़ाइल में आयात करना होगा। फिर हमें आयात भी करना होगा component.js में फाइल index.js ताकि इसे बंडल करके DOM पर रेंडर किया जा सके। घटक एक फ़ंक्शन है जिसे कॉल किया जाता है और लौटाया जाता है main वह तत्व जो लौटाया गया था component.js फ़ाइल, और फिर इसे DOM के मुख्य भाग में इंजेक्ट किया जाता है:

import style from "./main.css";
import logo from "./logo.svg";
import component from "./component";

console.log("Hello world! My name is Uche Azubuko!");

document.body.append(component());

अब, जब हम डेव सर्वर को दोबारा चलाते हैं, तो हमारे पास SVG फ़ाइल अब DOM पर प्रस्तुत होनी चाहिए:

यदि हम चाहते हैं कि बंडलिंग पूरी होने के बाद हमारी बंडल की गई छवियां अपना मूल नाम बरकरार रखें, तो webpack.config.js, हम सेट कर सकते हैं assestModuleFilename करने के लिए हो सकता है "[name][ext]" में output विकल्प:

output: {
  path: path.resolve(__dirname, "dist"),
  filename: "[name].[contenthash].js",
  clean: true,
  assetModuleFilename: "[name][ext]",
},

अब, जब हम डेवलपमेंट सर्वर को पुनः आरंभ करते हैं तो छवि का नाम वही होना चाहिए जो बंडलिंग होने से पहले था।

ट्रांसपिलिंग

अपने कोड को पुराने ES5 संस्करणों में ट्रांसपाइल करना अक्सर एक अच्छा विचार होता है ताकि पुराने ब्राउज़र आपके कोड को समझ सकें, साथ ही नए ब्राउज़र जो ES6 और ES7 का उपयोग करते हैं, वे भी समझ सकें। इसे प्राप्त करने के लिए, हम बैबेल टूल का उपयोग करते हैं।

अब, हम एक नियम शामिल करते हैं जो सभी जावास्क्रिप्ट फ़ाइलों को खोजता है src फ़ोल्डर को छोड़कर node_modules फ़ोल्डर, फिर उनका उपयोग करके ट्रांसपाइल करें babel-loader जो उपयोग करता है @babel/core और इसे सेट करने के साथ-साथ एक देव निर्भरता के रूप में स्थापित किया जाएगा presets के लिए विकल्प @babel/preset-env.

सबसे पहले, आइए आवश्यक पैकेज स्थापित करें:

$ yarn add --dev babel-loader @babel/core @babel/preset-env
# Or
$ npm install --save-dev babel-loader @babel/core @babel/preset-env

module.exports = {
  

  module: {
    
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: { presets: ["@babel/preset-env"] },
      },
    },
  },
};

फ़ाइल को सहेजें, फिर डेवलपमेंट सर्वर को फिर से चलाएँ। इस बार, हमारे एप्लिकेशन में अब पुराने ब्राउज़रों के लिए समर्थन है जो ES5 मॉड्यूल का उपयोग करते हैं और अब अधिक पिछड़े संगत हैं

निष्कर्ष

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

भले ही आप जैसे उपकरणों का उपयोग करें vue-create Vue प्रोजेक्ट स्थापित करने के लिए या create-react-app रिएक्ट ऐप सेट करने के लिए, सच्चाई यह है कि वे पर्दे के पीछे वेबपैक का उपयोग करते हैं।

वेबपैक को समझना वास्तव में उतना कठिन नहीं है, और इस गाइड से, वेबपैक में एसएएसएस, पोस्टसीएसएस और उत्पादन अनुकूलन के साथ कैसे काम करना है, यह देखना आपके लिए अपने सीखने का विस्तार करना अद्भुत होगा। यदि आपको यह चुनौतीपूर्ण लगता है, तो बेझिझक मुझसे संपर्क करें, मुझे मदद करने में खुशी होगी।

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

आप इस गाइड में प्रयुक्त सभी स्रोत कोड का संदर्भ ले सकते हैं Github.

अतिरिक्त स्रोत