Saya punya dua pertanyaan.
CSS Loader dan Style Loader adalah dua pemuat webpack. Saya tidak bisa memahami perbedaan di antara keduanya. Mengapa saya harus menggunakan dua loader ketika keduanya melakukan pekerjaan yang sama?
Apa yang dimaksud dengan .useable.less dan .useable.css yang disebutkan dalam file Readme.md di atas?
CSS loader mengambil file CSS dan mengembalikan CSS dengan imports
dan url(....)
yang diselesaikan melalui fungsionalitas require
webpack:
var css = require("css!./file.css"); // => mengembalikan kode css dari file.css, menyelesaikan impor dan url(...)
Itu tidak benar-benar melakukan apa pun dengan CSS yang dikembalikan.
Pemuat gaya mengambil CSS dan benar-benar menyisipkannya ke dalam halaman sehingga gaya aktif pada halaman.
Mereka melakukan operasi yang berbeda, tetapi sering kali berguna untuk merangkaikan mereka bersama-sama, seperti pipa Unix. Sebagai contoh, jika Anda menggunakan Less CSS preprocessor, Anda dapat menggunakan
require("style!css!less!./file.less")
untuk
file.less
menjadi CSS biasa dengan Less loaderimport
dan url(...)
dalam CSS dengan CSS loadercss-loader
membaca file css sebagai string. Anda bisa menggantinya dengan raw-loader
dan mendapatkan efek yang sama dalam banyak situasi. Karena hanya membaca isi file dan tidak ada yang lain, pada dasarnya tidak berguna kecuali anda menghubungkannya dengan loader lain.
style-loader
mengambil gaya-gaya tersebut dan membuat tag <style>
di halaman elemen <head>
yang berisi gaya-gaya tersebut.
Jika anda melihat javascript di dalam bundle.js
setelah menggunakan style-loader
anda akan melihat komentar di dalam kode yang dihasilkan yang mengatakan
// style-loader: Menambahkan beberapa css ke DOM dengan menambahkan tag
Sebagai contoh,
<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>
Contoh tersebut berasal dari tutorial ini. Jika Anda menghapus style-loader
dari pipeline dengan mengubah baris
require("!style-loader!css-loader!./style.css");
menjadi
require("css-loader!./style.css");
Anda akan melihat bahwa <style>
hilang.
Untuk menjawab pertanyaan kedua "Apa yang dimaksud dengan .useable.less dan .useable.css yang disebutkan dalam file Readme.md di atas? ", secara default ketika sebuah style require'd
, modul style-loader secara otomatis menyuntikkan tag <script>
ke dalam DOM, dan tag tersebut tetap berada di DOM sampai jendela browser ditutup atau dimuat ulang. Modul style-loader juga menawarkan apa yang disebut "reference-counted API" yang memungkinkan pengembang untuk menambahkan style dan menghapusnya nanti ketika sudah tidak diperlukan lagi. API bekerja seperti ini:
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
Dengan konvensi, style sheet yang dimuat menggunakan API ini memiliki ekstensi ".usable.css" daripada hanya ".css" seperti di atas.
Webpack dokumentasi merekomendasikan untuk menggabungkan gaya-loader dengan css-loader: