Webpack style-loader vs css-loader

238

Saya punya dua pertanyaan.

1) CSS Loader dan Style Loader adalah dua webpack loader. Saya tidak bisa memahami perbedaan antara keduanya. Mengapa saya harus menggunakan dua loader ketika keduanya melakukan pekerjaan yang sama?

2) Apa ini .useable.less dan .useable.css yang disebutkan dalam file Readme.md di atas?

webpack webpack-style-loader Anvesh Checka
sumber
Lihat Ini adalah cara angular-cli / webpack mengirimkan gaya CSS Anda ke klien untuk penjelasan mendalam
Max Koretskyi

Jawaban:

283

Pemuat CSS mengambil file CSS dan mengembalikan CSS dengan importsdan url(...)diselesaikan melalui requirefungsionalitas webpack :

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

Sebenarnya tidak melakukan apa-apa dengan CSS yang dikembalikan.

Pemuat gaya mengambil CSS dan benar-benar memasukkannya ke halaman sehingga gaya aktif di halaman.

Mereka melakukan operasi yang berbeda, tetapi sering berguna untuk rantai mereka bersama, seperti pipa Unix Misalnya, jika Anda menggunakan preprocessor Less CSS , Anda bisa menggunakan

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

untuk

  1. Ubah file.lessmenjadi CSS biasa dengan Less loader
  2. Selesaikan semua importsdan url(...)s di CSS dengan CSS loader
  3. Masukkan gaya-gaya tersebut ke halaman dengan pemuat gaya
Michelle Tilley
sumber
24
Bisakah Anda jelaskan, apa yang Anda mena dengan memasukkan gaya ke halaman? Karena saya menggunakan ExtractTextPlugin untuk CSS dan sesuai dengan apa yang Anda tulis, saya tidak boleh menggunakan pemuat gaya. Juga, apa yang saya rasakan adalah bahwa menggunakan pemuat gaya membuat Gaya saya dibundel dengan JS sampai saya menggunakan plugin ekstrak. Catatan: Saya menggunakan webpack. Dan setelah menghapus style-loader itu, segalanya tidak berubah bagi saya karena saya baru saja mengatakan di atas bahwa saya sudah memiliki CSS saya di file terpisah yang dibuat oleh ekstrak plugin ..
myDoggyWritesCode
6
@ user3241111 Saya pikir maksudnya ini: "Menambahkan CSS ke DOM dengan menyuntikkan <style>tag" (ini disalin dari dokumentasi resmi di github.com/webpack/style-loader )
exmaxx
1
Jadi idenya adalah bahwa webpack menghapus semua CSS yang Anda proses dan menempatkannya di kepala dokumen sehingga ia menghindari permintaan HTTP untuk tag <link> dan definisi gaya url? Saya menganggap ini intinya. Hal-hal seperti glamor dan glamor melakukan ini juga. Saya yakin ini lebih cepat memuat dengan cara ini. Tapi saya mungkin salah.
Tamb
Dengan importssaya menganggap Anda merujuk ke @importarahan. Secara default, arahan ini tidak menggabungkan aturan CSS yang diimpor ke dalam importir, tetapi membuat GETpermintaan lain . Apakah Anda mengatakan bahwa css-loaderakan mengembalikan hasil gabungan?
adi518
1
dan mengembalikan CSS - mengembalikan JS, lihat Ini adalah cara angular-cli / webpack mengirimkan gaya CSS Anda ke klien
Max Koretskyi
55

css-loaderdibaca dalam file css sebagai string. Anda bisa menggantinya dengan raw-loaderdan mendapatkan efek yang sama di banyak situasi. Karena hanya membaca isi file dan tidak ada yang lain, itu pada dasarnya tidak berguna kecuali jika Anda rantai dengan loader lain.

style-loadermengambil gaya-gaya itu dan membuat <style>tag di <head>elemen halaman yang berisi gaya-gaya itu.

Jika Anda melihat javascript di dalam bundle.jssetelah menggunakan style-loaderAnda akan melihat komentar 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 itu berasal dari tutorial ini . Jika Anda menghapus style-loaderdari pipa dengan mengubah saluran

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

untuk

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

Anda akan melihat bahwa <style>hilang.

d512
sumber
5
jadi kapan saya harus menggunakannya css-loadersebagai lawan raw-loader?
Royi Namir
4
Css-loader menginterpretasikan @import dan url () seperti impor / mengharuskan () dan akan menyelesaikannya. Pemuat mentah hanya memuat file yang ditentukan.
andrew
13

Untuk menjawab pertanyaan kedua "Apa ini .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 <script>tag ke DOM, dan tag itu tetap berada di DOM hingga jendela browser ditutup atau dimuat ulang. Modul gaya-loader juga menawarkan apa yang disebut "API dihitung-referensi" yang memungkinkan pengembang untuk menambah gaya dan menghapusnya nanti ketika mereka tidak lagi diperlukan. API berfungsi 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

Secara konvensional, style sheet yang dimuat menggunakan API ini memiliki ekstensi ".usable.css" daripada hanya ".css" seperti di atas.

chrisarnesen
sumber
Jawaban ini bukan tentang konfigurasi Webpack.
Andrew Koster
@AndrewKoster Saya tidak mengerti maksud Anda. Ini adalah jawaban untuk bagian kedua dari pertanyaan dua bagian poster asli tentang cara kerja dalam dan konvensi penamaan file dari modul gaya-loader.
chrisarnesen
Tentu, tetapi seperti yang Anda katakan, ada dua bagian dari pertanyaan itu. Jawaban ini (dan jawaban yang diterima) sepenuhnya mengabaikan bagian pertama dari pertanyaan, yang merupakan bagian yang lebih penting dan dapat diterapkan secara umum. Satu-satunya jawaban yang menjawab pertanyaan tentang apakah loader ini, dan bagaimana mengkonfigurasinya, adalah jawaban Brian Ogden yang tidak dipilih oleh siapa pun (karena alasan tertentu).
Andrew Koster
Saya tidak menggunakan yang aneh ini memerlukan sintaks dengan tanda seru gila, tapi saya masih perlu tahu cara mengkonfigurasi loader ini di Webpack. Kasus penggunaan saya tampaknya lebih umum daripada apa pun yang Anda semua lakukan dengan sintaks yang membutuhkan sintaksis.
Andrew Koster