Instructions d'utilisation du mécanisme de chargement dans le code source du webpack

Cette fois, je vais vous apporter les instructions d'utilisation du mécanisme de chargement dans le code source du webpack. Quelles sont les précautions lors de l'utilisation du mécanisme de chargement dans le code source du webpack. Voici un cas pratique. jetez un oeil.

Concept du chargeur

Le chargeur est utilisé pour charger et traiter diverses formes de ressources. Il s'agit essentiellement d'une fonction qui accepte les fichiers comme paramètres et renvoie la structure convertie.

loader est utilisé pour convertir le code source du module. les chargeurs vous permettent de pré-traiter les fichiers lors de l'importation ou du "chargement" de modules. Par conséquent, les chargeurs sont similaires aux « tâches » dans d’autres outils de build et fournissent un moyen puissant de gérer les étapes de build frontales. Le chargeur peut convertir des fichiers de différents langages tels que TypeScript en JavaScript, ou convertir des images en ligne en URL de données. Le chargeur permet même d'importer des fichiers CSS directement dans les modules JavaScript !

La différence entre le chargeur et le plugin

Le mécanisme du plugin a été présenté dans l'article précédent, et le chargeur, l'objet de l'étude d'aujourd'hui, ensemble, ils ont considérablement élargi le webpack fonction. La différence entre eux est que le chargeur est utilisé pour convertir le code source du module, tandis que le but du plug-in est de résoudre d'autres problèmes que le chargeur ne peut pas réaliser. Pourquoi en dites-vous autant ? Étant donné que le plugin peut être appelé à tout moment, il peut traiter davantage la sortie du chargeur via le chargeur, déclencher des événements pendant l'exécution de la construction, exécuter des rappels pré-enregistrés et utiliser l'objet de compilation pour le faire. quelques choses de niveau inférieur.

Utilisation du chargeur

Configuration

module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     { loader: 'style-loader' },
     {
      loader: 'css-loader'
     }
    ]
   }
  ]
 }

en ligne

import Styles from 'style-loader!css-loader?modules!./styles.css';

CLI

webpack --module-bind 'css=style-loader!css-loader'

Expliquez que les trois méthodes d'utilisation ci-dessus consistent à exécuter un ensemble de chargeurs enchaînés dans l'ordre de droite à gauche. Le premier chargeur de la chaîne de chargeurs renvoie la valeur au chargeur suivant. Utilisez d'abord css-loader pour analyser le contenu CSS spécifié dans les chemins @import et url(), puis utilisez style-loader pour insérer le code CSS d'origine dans une balise de style sur la page.

implémentation du chargeur

//将css插入到head标签内部
module.exports = function (source) {
  let script = (`
   let style = document.createElement("style");
   style.innerText = ${JSON.stringify(source)};
   document.head.appendChild(style);
  `);
  return script;
}
//使用方式1
resolveLoader: {
  modules: [path.resolve('node_modules'), path.resolve(dirname, 'src', 'loaders')]
},
{
  test: /\.css$/,
  use: ['style-loader']
},
//使用方式2
//将自己写的loaders发布到npm仓库,然后添加到依赖,按照方式1中的配置方式使用即可

Explication Ce qui précède est une implémentation de chargeur simple, exécutée de manière synchrone, ce qui équivaut à réaliser la fonction de style-loader.

Principe du chargeur

function iteratePitchingLoaders(options, loaderContext, callback) {
  var currentLoaderObject = loaderContext.loaders[loaderContext.loaderIndex];
  // load loader module
  loadLoader(currentLoaderObject, function(err) {
    var fn = currentLoaderObject.pitch;
    runSyncOrAsync(
      fn,
      loaderContext, [loaderContext.remainingRequest, loaderContext.previousRequest, currentLoaderObject.data = {}],
      function(err) {
        if(err) return callback(err);
        var args = Array.prototype.slice.call(arguments, 1);
        if(args.length > 0) {
          loaderContext.loaderIndex--;
          iterateNormalLoaders(options, loaderContext, args, callback);
        } else {
          iteratePitchingLoaders(options, loaderContext, callback);
        }
      }
    );
  });
}

Explication selon laquelle ce qui précède sont les étapes clés de l'exécution du chargeur dans le code source du webpack Le chargeur est exécuté de manière récursive. similaire au milieu d'express

Fichiermécanisme

Code source de référence

1. webpack : "4.4.1"

2. webpack-cli : "2.0.13"

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes. , veuillez faire attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Analyse JS des étapes pour implémenter une barre de progression dynamique

js+css pour obtenir une saisie à vitesse contrôlable sur la page Effet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!