Detaillierte Erläuterung praktischer Fälle von Webpack + Loader

Dieses Mal werde ich Ihnen den praktischen Fall von Webpack + Loader ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die praktische Verwendung von Webpack + Loader?

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 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 Loader-Ausführung im Webpack-Quellcode sind. Der Ausführungsprozess ist ähnlich Der Express-Middleware-Mechanismus

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 auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue+Sortable-Projekt-Praxiscode

Anwenden des Antwort-Writebacks zum Rendern der Seite

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung praktischer Fälle von Webpack + Loader. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!