80 Zeilen Code zum Schreiben eines Webpack-Plugins und Veröffentlichen auf npm

1. Einleitung

Ich habe vor Kurzem die Prinzipien von Webpack studiert. Ich wusste vorher nur, wie man Webpack konfiguriert, kannte aber die internen Prozesse nicht. Nach einer Studienrunde habe ich das Gefühl, dass ich viel davon profitiert habe. Um das Gelernte zu festigen, habe ich beschlossen, selbst ein Plug-In zu schreiben.

Die von diesem Plugin implementierten Funktionen sind relativ einfach:

• Standardmäßig wird die Druckausgabe von console.log im js -Code gelöscht;
• Andere Methoden zum Entfernen console , wie etwa console.warn , console.error usw., können durch Übergeben der Konfiguration implementiert werden.

2. Webpack-Konstruktionsprozess und Plugin-Prinzip

2.1 Webpack-Build-Prozess

Der Hauptkonstruktionsprozess von Webpack kann in drei Phasen unterteilt werden:

• Initialisierungsphase: Starten Sie den Build, lesen und führen Sie die Konfigurationsparameter zusammen, laden Sie Plugin und instantiieren Sie Compiler .
• Kompilierungsphase: Ausgehend vom Entry wird für jedes Module der entsprechende Loader nacheinander aufgerufen, um den Dateiinhalt zu übersetzen. Anschließend wird Module gesucht und rekursiv kompiliert, von dem das Module abhängt.
• Generierungsphase: Kombinieren Sie die kompilierten Module zu Chunk , konvertieren Sie Chunk in Dateien und geben Sie sie im Dateisystem aus.

Wenn Webpack die Dateien der Produktionsumgebung verpackt, führt es nur einen Build durch und die oben genannten Schritte werden nacheinander ausgeführt. Wenn jedoch der Überwachungsmodus aktiviert ist, beispielsweise in einer Entwicklungsumgebung, wird der Build von Webpack fortgesetzt.

2.2 Plugin-Prinzip

Ein Webpack Plugin ist normalerweise eine Klasse mit einer apply Funktion, wo constructor die übergebenen Konfigurationselemente empfangen kann. Wenn das Plugin installiert ist, wird die apply -Funktion einmal aufgerufen und erhält Compiler Objekt. Wir können dann auf verschiedene Event-Hooks Compiler -Objekts hören, um die Plugin-Funktionalität zu entwickeln.

// Definiere eine Plugin-Klasse MyPlugin {
  // Konstruktor zum Empfangen von Plugin-Konfigurationsoptionen 
  Konstruktor(Optionen) {
    // Konfigurationselemente abrufen und Plugin initialisieren}

  // Wenn das Plugin installiert ist, wird apply aufgerufen und an den Compiler übergeben
  anwenden(Compiler) {
    // Erhalten Sie exklusiven Zugriff auf Comolier, Sie können Event-Hooks anhören // Funktionsentwicklung … 
  }
}

2.3 Compiler und Kompilierungsobjekte

Die beiden am häufigsten verwendeten Objekte bei der Entwicklung von Plugin sind Compiler und Compilation :

• Compiler -Objekt wird beim Start Webpack instanziiert. Dieses Objekt enthält alle Konfigurationsinformationen Webpack -Umgebung, einschließlich options , loaders , plugins usw. Im gesamten Webpack -Build-Prozess ist Compiler Objekt global eindeutig und bietet viele Event-Hook-Rückrufe für die Verwendung durch Plug-Ins.
• Das Compilation enthält die aktuellen Modulressourcen, kompilierte Ressourcen, geänderte Dateien usw. Compilation Kompilierungsobjekt ist im Webpack -Build-Prozess nicht eindeutig. Wenn Webpack die Dateierkennungsfunktion im Entwicklungsmodus aktiviert, wird Webpack bei jeder Dateiänderung neu erstellt und ein neues Compilation generiert. Das Compilation stellt außerdem viele Ereignisrückrufe bereit, die durch Plug-Ins erweitert werden können.

3. Plugin-Entwicklung

3.1 Projektverzeichnis

Die von diesem Plug-In implementierten Funktionen sind relativ einfach und das Dateiverzeichnis ist nicht kompliziert. Erstellen Sie zunächst einen leeren Ordner remove-console-Webpack-plugin und führen Sie npm init im Ordnerverzeichnis aus. Füllen Sie package.json bezogenen Informationen entsprechend den Eingabeaufforderungen aus. Erstellen Sie dann einen neuen src Ordner und fügen Sie den Hauptcode des Plug-Ins in src/index.js ein. Wenn Sie das Projekt auf github stellen müssen, fügen Sie am besten Dateien wie .gitignore und README.md hinzu.

// entferne das Konsolen-Webpack-Plugin
├─Quelle
│ └─index.js  
├─.gitignore
├─paket.json
└─README.md

3.2 Plugin-Code

Die Codelogik des Plug-Ins ist nicht kompliziert. Es gibt mehrere Hauptpunkte:

• Empfangen Sie die Konfigurationsparameter im Konstruktor, führen Sie die Parameter zusammen, holen Sie sich die console , die gelöscht werden muss, und speichern Sie sie im removed Array.
• Hören Sie sich den Hook compiler.hook.compilation in der apply Funktion an. Nachdem der Hook ausgelöst wurde, holen Sie sich compilation und hören Sie weiter auf seinen Hook. Die Hooks von Webpack4 und Webpack5 sind hier unterschiedlich, daher ist Kompatibilität erforderlich.
• Definieren Sie die Methode assetsHandler , um js Dateien zu verarbeiten, und verwenden Sie reguläre Ausdrücke, um die in removed enthaltenen console zu löschen.

Klasse RemoveConsoleWebpackPlugin {
  // Der Konstruktor akzeptiert Konfigurationsparameter Konstruktor(Optionen) {
    let include = Optionen und Optionen.include;
    let removed = ['log']; // Standard-Löschmethodeif (include) {
      wenn (!Array.isArray(include)) {
        console.error('options.include muss ein Array sein.');
      } sonst wenn (include.includes('*')) {
        // Die Übergabe von * bedeutet das Löschen aller Konsolen removed = Object.keys(console).filter(fn => {
          Rückgabetyp der Konsole [fn] === 'Funktion';
        })
      } anders {
        entfernt = einschließen; // Überschreiben entsprechend der eingehenden Konfiguration}
    }

    this.removed = entfernt;
  }

  // Webpack ruft die Apply-Methode der Plugin-Instanz auf und übergibt das Compilerobjekt apply(compiler) {
    // JS-Ressourcencode-Verarbeitungsfunktion let assetHandler = (assets, compilation) => {
      let removedStr = this.removed.reduce((a, b) => (a + '|' + b));

      lass reDict = {
        1: [RegExp(`\\.console\\.(${removedStr})\\(\\)`, 'g'), ''],
        2: [RegExp(`\\.console\\.(${removedStr})\\(`, 'g'), ';('],
        3: [RegExp(`console\\.(${removedStr})\\(\\)`, 'g'), ''],
        4: [RegExp(`Konsole\\.(${removedStr})\\(`, 'g'), '(']
      }

      Object.entries(assets).forEach(([Dateiname, Quelle]) => {
        // JS-Datei abgleichen, wenn (/\.js$/.test(Dateiname)) {
          // Dateiinhalt vor der Verarbeitung let outputContent = source.source();

          Objekt.Schlüssel(reDict).forEach(i => {
            sei [re, s] = reDict[i];
            Ausgabeinhalt = Ausgabeinhalt.replace(re, s);
          })

          Zusammenstellung.assets[Dateiname] = {
            // Dateiinhaltsquelle zurückgeben: () => {
              Ausgabeinhalt zurückgeben
            },
            // Dateigröße zurückgeben size: () => {
              gibt Buffer.byteLength(Ausgabeinhalt, 'utf8') zurück
            }
          }
        }
      })
    }

    /**
     * Hören Sie sich das Ereignis über compiler.hooks.compilation.tap an. * Holen Sie sich das Kompilierungsobjekt in der Rückrufmethode. */
    compiler.hooks.compilation.tap('RemoveConsoleWebpackPlugin',
      Kompilierung => {
        // Webpack 5
        wenn (Kompilierung.hooks.processAssets) {
          Kompilierung.hooks.processAssets.tap(
            { Name: 'RemoveConsoleWebpackPlugin' },
            Vermögenswerte => VermögenswerteHandler(Vermögenswerte, Zusammenstellung)
          );
        } sonst wenn (Kompilierung.hooks.optimizeAssets) {
          // Webpack 4
          Kompilierung.hooks.optimizeAssets.tap(
            "ConsoleWebpackPlugin entfernen", 
            Vermögenswerte => VermögenswerteHandler(Vermögenswerte, Zusammenstellung)
          );
        }
      })
  }
}

// Plugin exportieren
module.exports = RemoveConsoleWebpackPlugin;

4. Auf npm veröffentlichen

Wenn Sie möchten, dass andere Ihr Plugin verwenden, müssen Sie es in npm veröffentlichen. Der Hauptprozess der Veröffentlichung ist:

Registrieren Sie zunächst ein Konto auf npm -Website, öffnen Sie dann das Befehlszeilentool, geben Sie in einem beliebigen Verzeichnis npm login ein und melden Sie sich wie aufgefordert an.

Nach der Anmeldung können Sie mit npm whoami überprüfen, ob die Anmeldung erfolgreich war.

Überprüfen Sie vor der Veröffentlichung, ob die Datei package.json im Stammverzeichnis korrekt ausgefüllt ist. Die wichtigsten Felder sind:

• Name: bestimmt den Namen, den Benutzer beim Herunterladen Ihres Plugins verwenden. Es darf nicht den gleichen Namen wie ein vorhandenes Drittanbieterpaket auf npm haben, da es sonst nicht veröffentlicht werden kann;
• main: Der Hauptdateieintrag des Plugins. Wenn Webpack das Plugin einführt, wird es aus diesem Verzeichnis importiert.
• Version: Bei jedem veröffentlichten Update muss sich die Versionsnummer von der vorherigen Version unterscheiden, sonst schlägt der Upload fehl.
• Repository: Wenn Ihr Plugin-Code auf github , gitee oder anderen Websites abgelegt ist, können Sie ihn ausfüllen;
• privat: kann nicht auf true gesetzt werden, sonst kann es nicht veröffentlicht werden;

Wenn alles bereit ist, wechseln Sie in das Verzeichnis, in dem sich das Plugin befindet, und führen Sie npm publish aus, um das Plugin hochzuladen.

Suchen Sie nach dem erfolgreichen Hochladen auf npm Website, ob Sie das Plugin finden können.

5. Fazit

Damit ist der Artikel über das Schreiben eines Webpack-Plugins in 80 Codezeilen und dessen Veröffentlichung auf npm abgeschlossen. Weitere Informationen zum Veröffentlichen von Webpack-Plugins auf npm finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!