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 CSS हाताळणे, मॉड्यूल्स व्यवस्थापित करणे, लोडर आणि प्लगइन वापरणे, स्त्रोत कोड ऑप्टिमायझेशन आणि बरेच काही यासारखी अनेक शक्तिशाली वैशिष्ट्ये आहेत. Webpack या साधनाच्या क्षमतांचा पूर्ण फायदा घेण्यासाठी अधिकृत दस्तऐवज एक्सप्लोर करा .