Webpack style-loader vs css-loader

238

Mam dwa pytania.

1) CSS Loader i Style Loader to dwa moduły ładujące webpack. Nie mogłem zrozumieć różnicy między nimi. Dlaczego muszę używać dwóch ładowarek, gdy oba wykonują tę samą pracę?

2) Co to jest .useable.less i .useable.css wspomniane w powyższych plikach Readme.md?

webpack webpack-style-loader Anvesh Checka
źródło
Zobacz Oto, w jaki sposób angular-cli / webpack dostarcza klientowi twoje style CSS w celu dogłębnego wyjaśnienia
Max Koretskyi

Odpowiedzi:

283

Ładowarka CSS zajmuje plik CSS i zwraca z CSS importsi url(...)rozwiązane poprzez WebPACK w requirefunkcjonalności:

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

W rzeczywistości nic nie robi ze zwróconym CSS.

Moduł ładujący style pobiera CSS i faktycznie wstawia go na stronę, aby style były aktywne na stronie.

Wykonują różne operacje, ale często przydaje się ich połączenie, np. Potoki Unix. Na przykład, jeśli korzystasz z preprocesora Less CSS , możesz go użyć

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

do

  1. Zamień się file.lessw zwykły CSS za pomocą modułu ładującego Less
  2. Rozwiązać wszystkich importsi url(...)S w CSS z ładowaczem CSS
  3. Wstaw te style do strony za pomocą modułu ładującego style
Michelle Tilley
źródło
24
Czy możesz powiedzieć, co robisz, wstawiając styl na stronę? Ponieważ używam ExtractTextPlugin dla CSS i zgodnie z tym, co napisałeś, nie powinienem używać modułu ładującego style. Czuję też, że użycie modułu ładującego style powoduje, że mój styl jest dołączany do JS, dopóki nie użyję wtyczki do ekstrakcji. Uwaga: używam webpacka. Po usunięciu modułu ładującego style dla mnie nic się nie zmieniło, ponieważ właśnie powiedziałem powyżej, że mam już swój CSS w osobnym pliku utworzonym przez wypakowanie wtyczki ..
myDoggyWritesCode
6
@ user3241111 Myślę, że miał na myśli to: „Dodaje CSS do DOM poprzez wstrzyknięcie <style>tagu” (jest to kopiowane z oficjalnej dokumentacji na github.com/webpack/style-loader )
exmaxx 10.10.16
1
Pomysł polega na tym, że webpack usuwa wszystkie przetworzone pliki CSS i umieszcza je w nagłówku dokumentu, aby uniknąć żądań HTTP dotyczących tagów <link> i definicji stylów adresów URL? Zakładam, że o to chodzi. Takie rzeczy jak glamour i glamour również to robią. Jestem prawie pewien, że w ten sposób ładuje się szybciej. Ale mogę się mylić.
Tamb
Przez importsZakładam, że odnoszą się do @importdyrektyw. Domyślnie ta dyrektywa nie łączy importowanych reguł CSS z importerem, ale tworzy kolejne GETżądanie. Czy mówisz, że css-loaderzwróci połączone wyjście?
adi518
1
i zwraca CSS - zwraca JS, zobacz W ten sposób angular-cli / webpack dostarcza klientowi twój styl CSS
Max Koretskyi
55

css-loaderwczytuje plik css jako ciąg znaków. Możesz go zastąpić raw-loaderi uzyskać ten sam efekt w wielu sytuacjach. Ponieważ po prostu czyta zawartość pliku i nic więcej, jest w zasadzie bezużyteczny, chyba że połączysz go z innym programem ładującym.

style-loaderpobiera te style i tworzy <style>znacznik w <head>elemencie strony zawierającym te style.

Jeśli spojrzysz na javascript bundle.jspo użyciu style-loader, zobaczysz komentarz w wygenerowanym kodzie, który mówi

// style-loader: Dodaje trochę css do DOM poprzez dodanie znacznika

Na przykład,

<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>

Ten przykład pochodzi z tego samouczka . Jeśli usuniesz style-loaderz potoku, zmieniając linię

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

do

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

zobaczysz, że <style>odchodzi.

d512
źródło
5
więc kiedy powinienem używać css-loaderw przeciwieństwie do raw-loader?
Royi Namir
4
Program ładujący css interpretuje @import i url () jak import / need () i je rozwiąże. Moduł ładujący raw ładuje tylko określony plik.
andrew
13

Aby odpowiedzieć na drugie pytanie „Co to jest. Useable.less i .useable.css wspomniane w powyższych plikach Readme.md?”, Domyślnie, gdy istnieje styl require'd, moduł ładujący style automatycznie wstrzykuje <script>znacznik do DOM i ten znacznik pozostaje w DOM, dopóki okno przeglądarki nie zostanie zamknięte lub ponownie załadowane. Moduł modułu ładującego style oferuje również tak zwane „API zliczające referencje”, które pozwala programistom dodawać style i usuwać je później, gdy nie są już potrzebne. Interfejs API działa w następujący sposób:

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

Zgodnie z konwencją arkusze stylów ładowane przy użyciu tego interfejsu API mają rozszerzenie „.usable.css” zamiast po prostu „.css” jak wyżej.

chrisarnesen
źródło
Ta odpowiedź nie dotyczy konfiguracji pakietu WebPack.
Andrew Koster
@AndrewKoster Nie rozumiem, co masz na myśli. Jest to odpowiedź na drugą część dwuczęściowego pytania oryginalnego plakatu na temat wewnętrznego działania i konwencji nazewnictwa plików modułu modułu ładującego style.
chrisarnesen
Jasne, ale jak mówisz, pytanie składa się z dwóch części. Ta odpowiedź (i odpowiedź zaakceptowana) całkowicie ignoruje pierwszą część pytania, która jest ważniejszą i ogólnie obowiązującą częścią. Jedyną odpowiedzią na pytanie, czym są te moduły ładujące i jak je skonfigurować, jest odpowiedź Briana Ogdena, na którą nikt nie głosuje (z jakiegoś powodu).
Andrew Koster,
Nie używam żadnej z tych dziwnych wymaga składni z szalonymi wykrzyknikami, ale wciąż muszę wiedzieć, jak skonfigurować te moduły ładujące w Webpack. Mój przypadek użycia wydaje się być bardziej powszechny niż cokolwiek, co wszyscy robicie ze zwariowanym wymaga składni.
Andrew Koster,