वेबपैक स्टाइल-लोडर बनाम सीएसएस-लोडर

238

मेरे दो सवाल हैं।

1) CSS लोडर और स्टाइल लोडर दो वेबपैक लोडर हैं। मैं दोनों के बीच के अंतर को समझ नहीं सका। जब वे दोनों एक ही काम करते हैं तो मुझे दो लोडर का उपयोग क्यों करना पड़ता है?

2) यह क्या है .useable.less और .useable.css उपरोक्त Readme.md फ़ाइलों में वर्णित है?

webpack webpack-style-loader

— अन्वेश चैका
स्रोत

यह देखें कि कैसे कोणीय-क्ली / वेबपैक आपके सीएसएस शैलियों को क्लाइंट को गहराई से स्पष्टीकरण के लिए वितरित करता है

— मैक्स कोरसेटस्की

283

CSS लोडर CSS फ़ाइल लेता है और CSS को वेबपैक की कार्यक्षमता के साथ लौटाता है importsऔर url(...)हल requireकरता है:

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

यह वास्तव में नहीं है कर लौटे सीएसएस के साथ कुछ भी।

स्टाइल लोडर CSS लेता है और वास्तव में इसे पेज में सम्मिलित करता है ताकि पेज पर शैलियाँ सक्रिय हों।

वे अलग-अलग ऑपरेशन करते हैं, लेकिन अक्सर यूनिक्स पाइप की तरह उन्हें एक साथ चेन करना उपयोगी होता है। उदाहरण के लिए, यदि आप कम सीएसएस प्रीप्रोसेसर का उपयोग कर रहे थे, तो आप उपयोग कर सकते हैं

require("style!css!less!./file.less")

सेवा

file.lessकम लोडर के साथ सादे सीएसएस में मुड़ें
सभी का समाधान करें importsऔर url(...)सीएसएस लोडर के साथ सीएसएस में रों
उन शैलियों को पृष्ठ में शैली लोडर के साथ डालें

— मिशेल टायली
स्रोत

24

क्या आप बता सकते हैं कि पृष्ठ में शैली सम्मिलित करके आप क्या करते हैं? क्योंकि मैं CSS के लिए ExtractTextPlugin का उपयोग कर रहा हूं और आपने जो लिखा है, उसके अनुसार मुझे स्टाइल लोडर का उपयोग नहीं करना चाहिए। इसके अलावा, मुझे क्या लगता है कि स्टाइल लोडर का उपयोग करने से मेरी स्टाइल जेएस के साथ बंडल हो जाती है जब तक कि मैं एक्सट्रैक्ट प्लगइन का उपयोग नहीं करता। नोट: मैं वेबपैक का उपयोग कर रहा हूं। और उस शैली-लोडर को हटाने के बाद, चीजें मेरे लिए अपरिवर्तित हैं क्योंकि मैंने अभी ऊपर बताया है कि मैं पहले से ही एक्स्ट्रेक्ट प्लगइन द्वारा बनाई गई अलग फाइल में अपना सीएसएस कर रहा हूं ..

— myDoggyWritesCode

6

@ user3241111 मुझे लगता है कि उनका यह मतलब था: "सीएसएस को एक <style>टैग इंजेक्ट करके डोम में जोड़ता है " (इसे आधिकारिक दस्तावेज से github.com/webpack/style-loader पर कॉपी किया गया है )

— Exmaxx

1

तो विचार यह है कि वेबपैक आपके सभी संसाधित सीएसएस को स्ट्रिप करता है और इसे दस्तावेज़ के सिर में रखता है ताकि यह HTTP लिंक <लिंक> टैग और यूआरएल शैली परिभाषाओं के लिए अनुरोध से बचा जाए? मुझे लगता है कि यह बात है। ग्लैमर और ग्लैमरस जैसी चीजें भी यही करती हैं। मुझे पूरा यकीन है कि यह इस तरह से तेजी से लोड हो रहा है। लेकिन मैं गलत हो सकता हूं।

— तंबू

तक importsमुझे लगता है आप का उल्लेख @importनिर्देशों। डिफ़ॉल्ट रूप से यह निर्देश आयात किए गए CSS नियमों को आयातक में विलय नहीं करता है, बल्कि एक और GETअनुरोध बनाता है । क्या आप कह रहे हैं कि css-loaderएक मर्ज किया गया आउटपुट लौटाएगा?

— adi518

1

और CSS लौटाता है - यह JS को लौटाता है, देखें कि यह कैसे कोणीय-cli / webpack क्लाइंट को आपकी CSS शैलियाँ बचाता है

— Max Koretskyi

55

css-loaderएक स्ट्रिंग के रूप में एक सीएसएस फ़ाइल में पढ़ता है। आप इसे बदल सकते हैं raw-loaderऔर बहुत सारी स्थितियों में समान प्रभाव प्राप्त कर सकते हैं। चूंकि यह सिर्फ फ़ाइल सामग्री को पढ़ता है और कुछ नहीं, यह मूल रूप से बेकार है जब तक कि आप इसे दूसरे लोडर के साथ चेन नहीं करते।

style-loaderउन शैलियों को लेता है और उन शैलियों <style>वाले पृष्ठ के <head>तत्व में एक टैग बनाता है ।

यदि आप bundle.jsउपयोग करने के बाद अंदर जावास्क्रिप्ट को style-loaderदेखते हैं तो आपको उत्पन्न कोड में एक टिप्पणी दिखाई देगी जो कहती है

// स्टाइल-लोडर: एक टैग जोड़कर डोम को कुछ सीएसएस जोड़ता है

उदाहरण के लिए,

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

यह उदाहरण इस ट्यूटोरियल से आता है । यदि आप style-loaderलाइन को बदलकर पाइपलाइन से निकालते हैं

require("!style-loader!css-loader!./style.css");

सेवा

require("css-loader!./style.css");

आप देखेंगे कि <style>दूर चला जाता है।

— d512
स्रोत

5

तो मुझे css-loaderविरोध के रूप में कब उपयोग करना चाहिए raw-loader?

— रॉय नमिर

4

सीएसएस-लोडर @import और url () जैसे आयात / आवश्यकता () की व्याख्या करता है और उनका समाधान करेगा। रॉ-लोडर केवल निर्दिष्ट फ़ाइल लोड करता है।

— andrew

13

दूसरे प्रश्न का उत्तर देने के लिए "यह क्या है .useable.less और .useable.css ऊपर उल्लिखित Readme.md फ़ाइलों में उल्लिखित है?", जब एक शैली डिफ़ॉल्ट रूप से। require'd , तो स्टाइल-लोडर मॉड्यूल स्वचालित रूप <script>से DOM में एक टैग इंजेक्ट करता है? यह टैग DOM में तब तक रहता है जब तक ब्राउज़र विंडो बंद या पुनः लोड नहीं हो जाता। स्टाइल-लोडर मॉड्यूल भी एक तथाकथित "संदर्भ-गिनती एपीआई" प्रदान करता है जो डेवलपर को शैलियों को जोड़ने और बाद में उन्हें हटाने की अनुमति देता है जब उन्हें अब आवश्यकता नहीं होती है। एपीआई इस तरह काम करता है:

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

अधिवेशन द्वारा, इस एपीआई का उपयोग करके भरी हुई शैली की शीटों में ऊपर के रूप में ".ableable.css" के बजाय ".css" का विस्तार है।

— chrisarnesen
स्रोत

यह उत्तर वेबपैक कॉन्फ़िगरेशन के बारे में नहीं है।

— एंड्रयू कोस्टर

@AndrewKoster मुझे समझ नहीं आ रहा है कि आपका क्या मतलब है। यह मूल पोस्टर के दो-भाग के दूसरे भाग का उत्तर है जो आंतरिक कामकाज और स्टाइल-लोडर मॉड्यूल के फ़ाइल नामकरण सम्मेलनों के बारे में है।

— क्रिसरसन 2

ज़रूर, लेकिन जैसा कि आप कहते हैं, प्रश्न के दो भाग हैं। यह उत्तर (और स्वीकृत उत्तर) प्रश्न के पहले भाग को पूरी तरह से अनदेखा करता है, जो कि अधिक महत्वपूर्ण और आम तौर पर लागू होने वाला हिस्सा है। एकमात्र उत्तर जो इन लोडरों के प्रश्न को संबोधित करता है, और उन्हें कैसे कॉन्फ़िगर करना है, ब्रायन ओगडेन का जवाब है कि कोई भी (किसी कारण से) मतदान नहीं कर रहा है।

— एंड्रयू कोस्टर

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

— एंड्रयू कोस्टर

2

वेबपैक प्रलेखन सीएसएस-लोडर के साथ स्टाइल-लोडर को संयोजित करने की सिफारिश करता है:

https://webpack.js.org/loaders/style-loader/

— ब्रायन ओगडेन
स्रोत