Anweisungen zur Verwendung des Lademechanismus im Webpack-Quellcode

Dieses Mal bringe ich Ihnen die Anweisungen zur Verwendung des Loader-Mechanismus im Webpack-Quellcode. Was sind die Vorsichtsmaßnahmen, wenn Sie den Loader-Mechanismus im Webpack-Quellcode verwenden? ein Blick.

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. Der Loader kann Dateien aus verschiedenen Sprachen wie TypeScript in JavaScript konvertieren oder Inline-Bilder in Daten-URLs umwandeln. 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 haben sie das Webpack erheblich erweitert Funktion. 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'
     }
    ]
   }
  ]
 }

Inline

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

CLI

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

Erklären Sie, dass die oben genannten drei Verwendungsmethoden alle einen Satz verketteter Lader in der Reihenfolge von rechts nach links ausführen. 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, was der Realisierung der Funktion des Style-Loaders entspricht.

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, dass die oben genannten Schritte die Ausführung des Loaders im Webpack-Quellcode sind. Der Ausführungsprozess ist ähnlich Express

MiddlewareMechanismus

Referenzquellcode

1. Webpack: „4.4.1“

2. webpack- cli: „2.0.13“

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS-Analyse der Schritte zur Implementierung eines dynamischen Fortschrittsbalkens

js+css, um eine kontrollierbare Geschwindigkeitseingabe zu erreichen auf der Seite Wirkung

Das obige ist der detaillierte Inhalt vonAnweisungen zur Verwendung des Lademechanismus im Webpack-Quellcode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!