Wie implementiert Webpack Loader? (mit Code)

Der Inhalt dieses Artikels befasst sich damit, wie Webpack Loader implementiert? (Beigefügt ist der Code), der einen gewissen Referenzwert hat. Freunde in Not können sich darauf beziehen. Ich hoffe, er wird für Sie hilfreich sein.

Wie implementiert man einen Loader?

Wir haben in den vorherigen Abschnitten über Lader gesprochen. Der gewalttätigste Weg ist, sie von Hand zu implementieren.

Okay, zurück zum Thema Loader zuerst.

Loader-Definition: Wird zum Konvertieren des Quellcodes des Moduls verwendet. Mit dem Loader können Sie Dateien beim Importieren oder „Laden“ von Modulen vorverarbeiten.

Einfach zu verwenden

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            // loader 是导出为一个a函数的 node 模块。该函数在 loader 转换资源的时候调用
            // 给定的函数将调用 loader API，并通过 this 上下文访问
            loader: path.resolve('loader.js'),
            options: {/* ... */}
          }
        ]
      }
    ]
  }
};

Nachdem wir die Definition und die einfache Verwendung des Loaders überprüft haben, analysieren wir die Idee der Loader-Implementierung

Einzelne Verantwortung, ein Lader macht nur eine Sache

Kettenkombination, jeder Lader in der Kette wendet die Konvertierung auf die verarbeiteten Ressourcen an

Modular, es wird als Knotenmodul einer Funktion exportiert

Parameter werden zusammengeführt und der Loader kann über das Optionsobjekt konfiguriert werden

Basierend auf den oben analysierten Punkten haben wir damit begonnen

// 这个就是一个最简单loader，
// 如果我们的loader有依赖其它模块，也得以module的写法将在在顶部引入
import fs from 'fs';
export default function(source){
    return source
}

Wir haben festgestellt, dass return direkt oben verwendet wurde, weil es so ist Ein Synchronisierungsklassenlader und der zurückgegebene Inhalt sind eindeutig. Wenn Sie möchten, dass Ihr Lader Kettenaufrufe unterstützt und die Ergebnisse zur weiteren Verwendung an den nächsten Lader zurückgibt, müssen Sie die von Webpack bereitgestellte API verwenden

Hier wir Werfen Sie einen kurzen Blick auf diese Definition von .callback, einer Funktion, die synchron oder asynchron aufgerufen werden kann und mehrere Ergebnisse zurückgeben kann. Die erwarteten Parameter sind

this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
)

rrree

Das Schreiben eines Loaders von Hand mag für diejenigen, die ihn noch nicht studiert haben, etwas schwierig klingen. Nachdem Sie die oben vorgestellten Inhalte und Ideen beherrscht haben, können Sie tatsächlich mit dem Schreiben eines einfachen Loaders beginnen. Lass es uns noch einmal verwenden. Was ist ein Loader mit einem einfachen Code?

// loader-utils 它提供了很多有用的工具
// 最常用的一个就是获取传入 loader 的 options
import { getOptions } from 'loader-utils';
export default function(source, other) {
  const options = getOptions(this)    
  // do whatever you want
  // ...
  this.callback(null, source, other)
}

Machen Sie Ihren Loader nützlicher

Lassen Sie mich sie hier erwähnen Weg

this.cacheable() Aus Sicht der Verbesserung der Ausführungseffizienz ist es äußerst wichtig, wie This.cacheable im Webpack den Loader problemlos zwischenspeichern kann

dies .async() als Loader Wenn es keine Abhängigkeiten gibt, sollten wir die Ergebnisse asynchron zurückgeben

Fallanalyse

Der Quellcode des Less-Loaders ist unten eingefügt Sehr prägnant. In Kombination mit dem, was wir oben analysiert haben, ist es auch sehr einfach zu verstehen

// 首先loader它是一个node模块，这很好理解
export const lessToCss = function(source, other) {
    // source 就是你即将要转换的文件源
    // TODO
    // 将转换好的文件源流转至一个管道
    this.callback(null, source, other)
}

Zusammenfassung

Loader ist ein Knotenmodul

Beim Schreiben von Loadern sollte ein einziges Prinzip befolgt werden . Jeder Loader führt nur eine Art von „Escape“-Funktion aus

Webpack stellt uns eine umfangreiche Loader-API zur Verfügung

Webpack stellt uns auch eine Reihe von Toolfunktionen zur Verfügung – Loader-Utils

[Verwandte Empfehlungen: JavaScript-Video-Tutorial]

Das obige ist der detaillierte Inhalt vonWie implementiert Webpack Loader? (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!