Explication détaillée du mécanisme de chargement du code source du webpack

Cet article présente principalement l'explication détaillée du mécanisme de chargement du code source du webpack. Maintenant, je le partage avec vous et le donne comme référence.

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'

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 de 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 simple du chargeur, méthode de synchronisation Exécution é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 Ce qui précède sont les étapes clés de l'exécution du chargeur dans le Code source du webpack, récursion La façon d'exécuter le chargeur, le processus d'exécution est similaire au mécanisme du middleware express

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Des exemples spécifiques à Jquery présentent quand utiliser AJAX et où AJAX doit être utilisé

js ajax Progress code à barres lors du chargement

Deux solutions aux problèmes inter-domaines Ajax

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!