ওয়েবপ্যাক শৈলী-লোডার বনাম সিএসএস-লোডার


238

আমার দুটি প্রশ্ন আছে।

1) সিএসএস লোডার এবং স্টাইল লোডার হ'ল দুটি ওয়েবপ্যাক লোডার। আমি দুজনের মধ্যে পার্থক্য বুঝতে পারি না। যখন তারা দু'জন একই কাজ করে তখন আমাকে কেন দুটি লোডার ব্যবহার করতে হবে?

2) উপরের Readme.md ফাইলগুলিতে উল্লিখিত এই .useable.less এবং .useable.css কী?


উত্তর:


283

সিএসএস-লোডার একটি CSS ফাইল লাগে এবং সঙ্গে CSS এর ফেরৎ importsএবং url(...)webpack এর মাধ্যমে সমাধান করা requireকার্যকারিতা:

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

এটা আসলে না কি ফিরে সিএসএস নিয়ে কিছু।

শৈলী লোডার CSS নেয় এবং এটি পৃষ্ঠাতে সন্নিবেশ করায় যাতে পৃষ্ঠাতে শৈলীগুলি সক্রিয় থাকে।

তারা বিভিন্ন অপারেশন করে তবে ইউনিক্স পাইপের মতো এগুলি প্রায়শই একসাথে চেইন করা কার্যকর। উদাহরণস্বরূপ, আপনি যদি কম সিএসএস প্রিপ্রোসেসর ব্যবহার করে থাকেন তবে আপনি ব্যবহার করতে পারেন

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

প্রতি

  1. file.lessকম লোডার দিয়ে প্লেইন সিএসএসে পরিণত করুন
  2. সিএসএসে সমস্ত importsurl(...)এর সমাধান করুন সিএসএস লোডার দিয়ে
  3. স্টাইল লোডার দিয়ে পৃষ্ঠাতে sty শৈলীগুলি সন্নিবেশ করান

24
আপনি দয়া করে বলতে পারেন, পৃষ্ঠায় শৈলী byুকিয়ে আপনি কী মেনা করেন? কারণ আমি সিএসএসের জন্য এক্সট্রাক্টটেক্সট প্লাগিন ব্যবহার করছি এবং আপনি যা লিখেছেন সে অনুসারে আমার স্টাইল লোডার ব্যবহার করা উচিত নয়। এছাড়াও, আমি যেটা অনুভব করি তা হ'ল স্টাইল লোডার ব্যবহার করা আমার স্টাইলটিকে জেএসের সাথে বান্ডিল হয়ে যায় যতক্ষণ না আমি এক্সট্র্যাক্ট প্লাগইন ব্যবহার করি। দ্রষ্টব্য: আমি ওয়েবপ্যাকটি ব্যবহার করছি। এবং স্টাইল-লোডারটি সরিয়ে দেওয়ার পরে, জিনিসগুলি আমার জন্য অপরিবর্তিত রয়েছে কারণ আমি কেবল উপরে বলেছি যে ইতিমধ্যে আমার সিএসএসের এক্সট্রাক্ট প্লাগইন দ্বারা পৃথক ফাইলে তৈরি করা হচ্ছে ..
myDoggyWritesCode

6
@ ব্যবহারকারী3241111 আমি মনে করি তিনি এর অর্থ বোঝাতে পেরেছিলেন: "একটি <style>ট্যাগ ইনজেকশনের মাধ্যমে ডিওমে সিএসএস যুক্ত করে " (এটি github.com/webpack/style-loader এ অফিসিয়াল ডকুমেন্টেশন থেকে অনুলিপি করা হয়েছে )
এক্সমাএক্সএক্স

1
সুতরাং ধারণাটি হ'ল যে ওয়েবপ্যাকটি আপনার সমস্ত প্রক্রিয়াজাত সিএসএস কে সরিয়ে দেয় এবং এটি নথির শিরোনামে রাখে যাতে এটি <লিঙ্ক> ট্যাগ এবং ইউআরএল স্টাইল সংজ্ঞাগুলির জন্য এইচটিটিপি অনুরোধগুলি এড়িয়ে চলে? আমি ধরে নিই এই বিষয়টি। গ্ল্যামার এবং গ্ল্যামারাসের মতো জিনিস এটিও করে। আমি নিশ্চিত যে এটি দ্রুত এভাবে লোড হচ্ছে। তবে আমি ভুল হতে পারি।
তাম্ব

দ্বারা importsআমি অনুমান আপনি পড়ুন @importনির্দেশনা। ডিফল্টরূপে এই নির্দেশটি আমদানিকারকের মধ্যে আমদানিকৃত সিএসএস বিধিগুলি মার্জ করে না, বরং অন্য একটি GETঅনুরোধ তৈরি করে create আপনি কি বলছেন যে css-loaderএকীভূত আউটপুট ফেরত দেবে?
adi518

1
এবং সিএসএস ফিরিয়ে দেয় - এটি জেএসকে
ম্যাক্স কোরেস্তস্কি

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>দূরে চলে যায়।


5
সুতরাং যখন আমি css-loaderবিরোধী হিসাবে ব্যবহার করা উচিত raw-loader?
রই নমির

4
সিএসএস-লোডার @ ইম্পোর্ট এবং ইউআরএল () আমদানি / প্রয়োজনীয় () এর মতো ব্যাখ্যা করে এবং সেগুলি সমাধান করবে। কাঁচা-লোডার কেবলমাত্র নির্দিষ্ট ফাইল লোড করে।
অ্যান্ড্রু

13

উপরোক্ত Readme.md ফাইলগুলিতে উল্লিখিত "এটি .useable.less এবং .useable.css কী?" - দ্বিতীয় প্রশ্নের উত্তর দেওয়ার জন্য require'd, কোনও শৈলী যখন হয় তখন স্টাইল-লোডার মডিউলটি স্বয়ংক্রিয়ভাবে একটি ডিওএম -তে একটি <script>ট্যাগ ইনজেক্ট করে , এবং ব্রাউজার উইন্ডোটি বন্ধ বা পুনরায় লোড না হওয়া অবধি সেই ট্যাগটি ডিওমে থাকবে। স্টাইল-লোডার মডিউলটি একটি তথাকথিত "রেফারেন্স-গণনা করা এপিআই "ও সরবরাহ করে যা বিকাশকারীদের শৈলী যুক্ত করতে এবং পরে যখন তাদের আর প্রয়োজন হয় না তখন এগুলি সরাতে দেয়। এপিআই এর মতো কাজ করে:

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

কনভেনশন অনুসারে, এই এপিআই ব্যবহার করে লোড করা স্টাইল শিটগুলির উপরের মতো কেবল ".সিএসএস" না করে ".usable.css" এর একটি এক্সটেনশন রয়েছে।


এই উত্তরটি ওয়েবপ্যাক কনফিগারেশন সম্পর্কে নয়।
অ্যান্ড্রু কোস্টার

@ অ্যান্ড্রুকোস্টার আপনি কি বলতে চাইছেন তা আমি বুঝতে পারি না। এটি স্টাইল-লোডার মডিউলের অভ্যন্তরীণ কার্যকারীতা এবং ফাইল নামকরণ কনভেনশন সম্পর্কে মূল পোস্টারের দ্বি-অংশ প্রশ্নের দ্বিতীয় ভাগের একটি উত্তর।
ক্রিসার্নসেন

অবশ্যই, তবে আপনি যেমনটি বলেছেন, প্রশ্নের দুটি অংশ রয়েছে। এই উত্তরটি (এবং স্বীকৃত উত্তর) প্রশ্নের প্রথম অংশটিকে সম্পূর্ণ উপেক্ষা করে, যা আরও গুরুত্বপূর্ণ এবং সাধারণভাবে প্রয়োগযোগ্য অংশ। এই লোডারগুলি কী কী এবং কীভাবে এটি কনফিগার করতে হয় - এই প্রশ্নের একমাত্র উত্তর হ'ল ব্রায়ান ওগডেনের উত্তর যে কেউ ভোট দিচ্ছে না (কোনও কারণে)।
অ্যান্ড্রু কোস্টার

আমি এই অদ্ভুত কোনওটিই পাগল উদ্দীপনা চিহ্নগুলির সাথে সিনট্যাক্সের প্রয়োজনীয়তা ব্যবহার করছি না, তবে ওয়েবপ্যাকে এই লোডারগুলি কীভাবে কনফিগার করতে হবে তা আমার এখনও জানতে হবে। আমার ব্যবহারের কেসটি আপনার সাধারণ সবাই যেভাবে পাগলের সাথে করছেন তার চেয়ে সিনট্যাক্সের চেয়ে সাধারণ ব্যবহারের মতো বলে মনে হচ্ছে।
অ্যান্ড্রু কোস্টার

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.