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 यस उपकरणको क्षमताहरू पूर्ण रूपमा प्रयोग गर्न आधिकारिक कागजातहरू अन्वेषण गर्नुहोस् ।