Comment utiliser le mécanisme de chargement du code source du webpack

Cette fois, je vais vous montrer comment utiliser le mécanisme de chargement de code source du webpack et quelles sont les précautions à prendre pour utiliser le mécanisme de chargement de code source du webpack. Ce qui suit est un cas pratique, jetons un coup d'œil.

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. Les chargeurs peuvent convertir des fichiers de différents langages (tels que TypeScript) en JavaScript, ou 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, objet de l'étude d'aujourd'hui, ensemble ils sont considérablement étendu les fonctionnalités de webpack. 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'

explique 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);
        }
      }
    );
  });
}

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 prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Comment utiliser Sortable dans Vue

Comment utiliser JS pour implémenter la surcharge d'opérateurs

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!