Webpack style-loader vs css-loader

J’ai deux questions.

1) CSS Loader et Style Loader sont deux chargeurs Webpack. Je ne pouvais pas saisir la différence entre les deux. Pourquoi dois-je utiliser deux chargeurs alors qu’ils font tous les deux le même travail?

2) Qu’est-ce que ce fichier .useable.less et .useable.css est mentionné dans les fichiers Readme.md ci-dessus?

    Le chargeur CSS prend un fichier CSS et retourne le CSS avec les imports et les url(...) résolues via les fonctionnalités requirejses par webpack:

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

    Il ne fait rien avec le CSS renvoyé.

    Le chargeur de style prend CSS et l’insère réellement dans la page pour que les styles soient actifs sur la page.

    Ils effectuent différentes opérations, mais il est souvent utile de les enchaîner, comme les tubes Unix. Par exemple, si vous utilisiez le préprocesseur Less CSS , vous pouvez utiliser

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

    à

    1. Transformez file.less en simple CSS avec le chargeur Less
    2. Résoudre toutes les imports et les url(...) en CSS avec le chargeur CSS
    3. Insérer ces styles dans la page avec le chargeur de style

    css-loader lit dans un fichier css sous forme de chaîne. Vous pouvez le remplacer par raw-loader et obtenir le même effet dans de nombreuses situations. Comme il ne lit que le contenu du fichier et rien d’autre, il est pratiquement inutile à moins de le chaîner avec un autre chargeur.

    style-loader prend ces styles et crée une

    dans l'élément la page contenant ces styles.

    Si vous regardez le javascript dans bundle.js après avoir utilisé style-loader vous verrez un commentaire dans le code généré qui dit

    // style-loader: ajoute du css au DOM en ajoutant une balise

    Par exemple,

              

    Cet exemple provient de ce tutoriel . Si vous retirez le style-loader de style-loader du pipeline en changeant la ligne

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

    à

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

    vous verrez que le

    s'en va.

    Pour répondre à la deuxième question “Qu’est-ce que ce fichier .useable.less et .useable.css mentionné dans les fichiers Readme.md ci-dessus?”, Par défaut lorsqu’un style est require'd , le module chargeur de style injecte automatiquement un tag dans le DOM, et cette balise rest dans le DOM jusqu'à ce que la fenêtre du navigateur soit fermée ou rechargée. Le module de chargement de styles propose également une API appelée "référence par comptage" qui permet au développeur d’append des styles et de les supprimer ultérieurement, lorsque ceux-ci ne sont plus nécessaires. L'API fonctionne comme ceci:

     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  

    Par convention, les feuilles de style chargées à l'aide de cette API ont une extension ".usable.css" plutôt que simplement ".css" comme ci-dessus.