Explication détaillée des cas pratiques de webpack+loader

Cette fois je vais vous apporter une explication détaillée du cas pratique de webpack+loader Quelles sont les précautions pour une utilisation pratique de webpack+loader ? Ce qui suit est un cas pratique, jetons un coup d'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. 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, 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 mécanisme de middleware express

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 Web chinois de php !

Lecture recommandée :

Code pratique du projet Vue+Sortable

Comment appliquer la réécriture de réponse pour afficher la page

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!