Webpack style-loader vs css-loader

У меня два вопроса.

1) CSS Loader и Style Loader - это два веб-загрузчика. Я не мог понять разницу между ними. Почему я должен использовать два загрузчика, когда они оба выполняют одну и ту же работу?

2) Что это .useable.less и .useable.css, упомянутые в вышеупомянутых файлах Readme.md?

Ответ 1

загрузчик CSS принимает файл CSS и возвращает CSS с imports и url(...) с помощью функции webpack require:

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

На самом деле он ничего не делает с возвращенным CSS.

Загрузчик стилей принимает CSS и фактически вставляет его в страницу, чтобы стили были активны на странице.

Они выполняют разные операции, но часто бывает полезно объединить их вместе, как и Unix-каналы. Например, если вы использовали препроцессор Less CSS, вы можете использовать

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

Поверните file.less в простой CSS с помощью Lesser
Разрешить все imports и url(...) в CSS с загрузчиком CSS
Вставьте эти стили на страницу со стильным загрузчиком

Ответ 2

css-loader читает в файле css в виде строки. Вы можете заменить его на raw-loader и получить тот же эффект во многих ситуациях. Так как он просто читает содержимое файла и ничего больше, он в основном бесполезен, если вы не связываете его с другим загрузчиком.

style-loader принимает эти стили и создает тег <style> в элементе <head> страницы, содержащий эти стили.

Если вы посмотрите на javascript внутри bundle.js после использования style-loader, вы увидите комментарий в сгенерированном коде, который говорит

//style-loader: добавляет некоторый css в DOM, добавляя тег

Например,

<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> уходит.

Ответ 3

Чтобы ответить на второй вопрос: "Что это такое .useable.less и .useable.css, упомянутое в вышеуказанных файлах Readme.md?", по умолчанию, когда стиль require'd, модуль стиля-загрузчика автоматически вводит <script> в DOM, и этот тег остается в DOM, пока окно браузера не будет закрыто или перезагружено. Модуль стиля-загрузчика также предлагает так называемый "API с подсчетом ссылок", который позволяет разработчику добавлять стили и удалять их позже, когда они больше не нужны. API работает следующим образом:

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

По соглашению, таблицы стилей, загруженные с использованием этого API, имеют расширение ".usable.css", а не просто ".css", как указано выше.