Detaillierte Erläuterung des Lademechanismus des Webpack-Quellcodes

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Lademechanismus des Webpack-Quellcodes vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Loader-Konzept

Loader wird zum Laden und Verarbeiten verschiedener Formen von Ressourcen verwendet. Es handelt sich im Wesentlichen um eine Funktion, die Dateien als Parameter akzeptiert und die konvertierte Struktur zurückgibt .

Loader wird zum Konvertieren des Quellcodes des Moduls verwendet. Mit Loadern können Sie Dateien beim Importieren oder „Laden“ von Modulen vorverarbeiten. Daher ähneln Lader „Aufgaben“ in anderen Build-Tools und bieten eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten. Loader können Dateien aus verschiedenen Sprachen (z. B. TypeScript) in JavaScript oder Inline-Bilder in Daten-URLs konvertieren. Mit dem Loader können Sie sogar CSS-Dateien direkt in JavaScript-Module importieren!

Der Unterschied zwischen Loader und Plugin

Der Plugin-Mechanismus wurde im vorherigen Artikel vorgestellt, und der Loader, das Objekt der heutigen Studie, zusammen sind sie Die Funktionalität von Webpack wurde erheblich erweitert. Der Unterschied besteht darin, dass der Loader zum Konvertieren des Quellcodes des Moduls verwendet wird, während der Zweck des Plug-Ins darin besteht, andere Dinge zu lösen, die der Loader nicht erreichen kann. Warum sagen Sie so viel? Da das Plugin jederzeit aufgerufen werden kann, kann es die Ausgabe des Loaders im gesamten Loader weiterverarbeiten, Ereignisse während des Build-Laufs auslösen, vorregistrierte Rückrufe ausführen und das Kompilierungsobjekt verwenden einige Dinge auf niedrigerer Ebene.

Loader-Nutzung

Konfiguration

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

Link

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

CLI

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

Anleitung Die Die oben genannten drei Verwendungsmethoden führen alle einen Satz verketteter Lader in der Reihenfolge von rechts nach links aus. Der erste Lader in der Laderkette gibt den Wert an den nächsten Lader zurück. Verwenden Sie zunächst den CSS-Loader, um den in den Pfaden @import und url() angegebenen CSS-Inhalt zu analysieren, und verwenden Sie dann den Style-Loader, um den ursprünglichen CSS-Code in ein Style-Tag auf der Seite einzufügen.

Loader-Implementierung

//将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中的配置方式使用即可

Erläuterung Das Obige ist eine einfache Loader-Implementierung, die synchron ausgeführt wird Dies entspricht der Implementierung der Style-Loader-Funktion.

Loader-Prinzip

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

Erklärung Das Obige sind die wichtigsten Schritte der Loader-Ausführung in der Webpack-Quelle Code, der rekursive Weg Beim Ausführen des Loaders ähnelt der Ausführungsprozess dem Express-Middleware-Mechanismus

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Jquery-spezifische Beispiele stellen vor, wann AJAX verwendet werden sollte und wo AJAX verwendet werden sollte

js ajax Progress Barcode beim Laden

Zwei Lösungen für domänenübergreifende Ajax-Probleme

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Lademechanismus des Webpack-Quellcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!