Webpack में एसेट्स

हर प्रोजेक्ट में कुछ संसाधन या एसेट्स (assets) होते हैं। ये एसेट्स चित्र, फ़ॉन्ट फ़ाइलें और इसी प्रकार की चीज़ें होती हैं।

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

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

Webpack में एसेट्स के साथ काम किया जाता है विशेष एसेट मॉड्यूल की सहायता से। उनके चार प्रकार हैं: asset/resource, asset/inline, asset/source, asset।

मॉड्यूल asset/resource फ़ाइलों को कॉपी करता है प्रोजेक्ट फ़ोल्डर से बिल्ड फ़ोल्डर में और पथों को प्रतिस्थापित करता है उन्हें नए पर। मॉड्यूल asset/inline फ़ाइलों को लेता है प्रोजेक्ट फ़ोल्डर से और बिल्ड कोड में फ़ाइलों के पथ को base64 से बदल देता है। मॉड्यूल asset/source फ़ाइलों को लेता है प्रोजेक्ट फ़ोल्डर से और उन्हें लौटाता है टेक्स्ट स्ट्रिंग के रूप में। मॉड्यूल asset स्वयं चुनता है, कॉपी करना है या नहीं फ़ाइल को बिल्ड फ़ोल्डर में या उसे बदलना है base में। चुनाव निर्भर करता है फ़ाइल के आकार पर। डिफ़ॉल्ट रूप से फ़ाइलें 8kb से अधिक की फ़ाइलों में बिल्ड होती हैं।

इन मॉड्यूलों को लागू करने की सामान्य योजना इस प्रकार दिखती है:

webpack.config.jsmodule: {
  rules: [
    {
      test: /\.png$/,        // फ़ाइलें
      type: 'asset/resource' // मॉड्यूल प्रकार
    }
  ]
},