So verwenden Sie den Webpack-Quellcode-Lademechanismus

Dieses Mal zeige ich Ihnen, wie Sie den Webpack-Quellcode-Lademechanismus verwenden und welche Vorsichtsmaßnahmen für die Verwendung des Webpack-Quellcode-Lademechanismus gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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'
     }
    ]
   }
  ]
 }

Inline

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

CLI

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

erklärt, dass die oben genannten drei Verwendungsmethoden darin bestehen, eine Reihe verketteter Lader der Reihe nach von rechts nach links auszuführen und der erste Lader in der Laderkette den Wert an den nächsten Lader zurückzugeben. 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);
        }
      }
    );
  });
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum Thema PHP chinesische Website!

Empfohlene Lektüre:

So verwenden Sie Sortable in Vue

So verwenden Sie JS zur Implementierung der Operatorüberladung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Webpack-Quellcode-Lademechanismus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!