Eine kurze Diskussion über das Implementierungsprinzip von Webpack4-Plugins

//Erstelle einen CompilercreateChildCompiler(
  Zusammenstellung,
  Compilername,
  CompilerIndex,
  Ausgabeoptionen,
  plugins // enthält Plugins) {

   // neuer Compiler const childCompiler = new Compiler(this.context);
  // Alle vorhandenen Plugins finden if (Array.isArray(plugins)) {
    für (const plugin von plugins) {
       // Falls vorhanden, rufen Sie die Apply-Methode des Plugins auf plugin.apply(childCompiler);
    }
  }
  
  // Durchlaufe und finde die Hooks, die dem Plugin entsprechen
  für (const name in this.hooks) {
    Wenn (
      ![
        "machen",
        "kompilieren",
        "emittieren",
        "nachEmit",
        "ungültig",
        "Erledigt",
        "dieseZusammenstellung"
      ].enthält(Name)
    ) {
    
      // Finde die entsprechenden Hooks und rufe sie auf, 
      wenn (childCompiler.hooks[name]) {
        childCompiler.hooks[name].taps = this.hooks[name].taps.slice();
      }
    }
  }
 
 // .... ausgelassen....

  gibt den untergeordneten Compiler zurück;
}

// Die obige Compiler-Klasse erbt von der Tapable-Klasse, und Tapable definiert diese Hooks Ereignisflüsse Klasse Compiler erweitert Tapable {
 Konstruktor(Kontext) {
            super();
            dies.hooks = {
                    /** @type {SyncBailHook<Kompilierung>} */
                    shouldEmit: neuer SyncBailHook(["Kompilierung"]),
                    /** @type {AsyncSeriesHook<Stats>} */
                    fertig: neuer AsyncSeriesHook(["stats"]),
                    /** @type {AsyncSeriesHook<>} */
                    zusätzlicherPass: neuer AsyncSeriesHook([]),
                    /** @type {AsyncSeriesHook<Compiler>} */
                    beforeRun: neuer AsyncSeriesHook(["Compiler"]),
                    /** @type {AsyncSeriesHook<Compiler>} */
                    ausführen: neuer AsyncSeriesHook(["Compiler"]),
                    /** @type {AsyncSeriesHook<Kompilierung>} */
                    emittieren: neuer AsyncSeriesHook(["Kompilierung"]),
                    /** @type {AsyncSeriesHook<string, Buffer>} */
                    assetEmitted: neuer AsyncSeriesHook(["Datei", "Inhalt"]),
                    /** @type {AsyncSeriesHook<Kompilierung>} */
                    afterEmit: neuer AsyncSeriesHook(["Kompilierung"]),

                    /** @type {SyncHook<Kompilierung, KompilationParams>} */
                    dieseKompilierung: neuer SyncHook(["Kompilierung", "Parameter"]),
                    /** @type {SyncHook<Kompilierung, KompilationParams>} */
                    Kompilierung: neuer SyncHook(["Kompilierung", "Parameter"]),
                    /** @type {SyncHook<NormalModuleFactory>} */
                    normalModuleFactory: neuer SyncHook(["normalModuleFactory"]),
                    /** @type {SyncHook<ContextModuleFactory>} */
                    KontextModulFactory: neuer SyncHook(["KontextModulFactory"]),

                    /** @type {AsyncSeriesHook<CompilationParams>} */
                    vor dem Kompilieren: neuer AsyncSeriesHook(["params"]),
                    /** @type {SyncHook<CompilationParams>} */
                    kompilieren: neuer SyncHook(["params"]),
                    /** @type {AsyncParallelHook<Kompilierung>} */
                    make: neuer AsyncParallelHook(["Kompilierung"]),
                    /** @type {AsyncSeriesHook<Kompilierung>} */
                    nach der Kompilierung: neuer AsyncSeriesHook(["Kompilierung"]),

                    /** @type {AsyncSeriesHook<Compiler>} */
                    watchRun: neuer AsyncSeriesHook(["Compiler"]),
                    /** @type {SyncHook<Fehler>} */
                    fehlgeschlagen: neuer SyncHook(["Fehler"]),
                    /** @type {SyncHook<Zeichenfolge, Zeichenfolge>} */
                    ungültig: neuer SyncHook(["Dateiname", "changeTime"]),
                    /** @Typ {SyncHook} */
                    watchClose: neuer SyncHook([]),

                    /** @type {SyncBailHook<string, string, any[]>} */
                    Infrastrukturprotokoll: neuer SyncBailHook (["Ursprung", "Typ", "Argumente"]),

                    // TODO die folgenden Hooks sind seltsamerweise hier platziert
                    // TODO, verschiebe sie für Webpack 5
                    /** @Typ {SyncHook} */
                    Umgebung: neuer SyncHook([]),
                    /** @Typ {SyncHook} */
                    nachUmgebung: neuer SyncHook([]),
                    /** @type {SyncHook<Compiler>} */
                    nachPlugins: neuer SyncHook(["Compiler"]),
                    /** @type {SyncHook<Compiler>} */
                    nachResolvern: neuer SyncHook(["Compiler"]),
                    /** @type {SyncBailHook<string, Eintrag>} */
                    Eintragsoption: neuer SyncBailHook(["Kontext", "Eintrag"])
            };
            
            // TODO webpack 5 entferne dies
            dies.hooks.infrastructurelog = dies.hooks.infrastructureLog;
               
            // Rufen Sie den entsprechenden Compiler über die Tabulatortaste auf und übergeben Sie eine Rückruffunktion this._pluginCompat.tap("Compiler", options => {
                    Schalter (Optionen.Name) {
                            Fall "Zusatzpass":
                            Fall "vor dem Ausführen":
                            Fall "laufen":
                            Fall "emittieren":
                            Fall „Nachemission“:
                            Fall "vor dem Kompilieren":
                            Fall "machen":
                            Fall „nach dem Kompilieren“:
                            Fall „Watch-Run“:
                                    Optionen.async = true;
                                    brechen;
                    }
            });
            // Unten ausgelassen......
  }

// Definiere eine Plugin-Klasse class MyPlugins {
    // Wie oben erwähnt, wird eine neue Compilerinstanz erstellt und die Apply-Methode der Instanz ausgeführt, wobei die entsprechende Compilerinstanz übergeben wird apply (compiler) {
        // Rufen Sie den Hook-Ereignisfluss unter der neuen Compilerinstanz auf, lösen Sie ihn über die Registerkarte aus und erhalten Sie eine Rückruffunktion compiler.hooks.done.tap('normalerweise der Spitzname des Plugins', (Standard-Empfangsparameter) => {
            console.log('Ausführungshauptteil eingeben');
        })
    }
}
// Exportmodule.exports = MeinePlugins

let path = require('Pfad')
let DonePlugin = require('./plugins/DonePlugins')
let AsyncPlugins = erfordern('./plugins/AsyncPlugins')

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: './src/index.js',
    Ausgabe: {
        Dateiname: „build.js“,
        Pfad: Pfad.auflösen(__dirname, 'dist')
    },
    Plugins: [
        new DonePlugin(), // Interne Synchronisations-Hooks
        new AsyncPlugins() // Interne asynchrone Hooks
    ]
}

Klasse DonePlugins {
    anwenden (Compiler) {
        compiler.hooks.done.tap('DonePlugin', (Statistiken) => {
            console.log('Ausführung: Kompilierung abgeschlossen');
        })
    }
}

module.exports = FertigPlugins

Klasse AsyncPlugins {
    anwenden (Compiler) {
        compiler.hooks.emit.tapAsync('AsyncPlugin', (abgeschlossen, Rückruf) => {
            setzeTimeout(() => {
                console.log('Ausführung: Datei ausgegeben');
                Rückruf()
            }, 1000)
        })
    }
}

module.exports = AsyncPlugins

Klasse FileListPlugin {
    // Initialisierung, hole den Dateinamenkonstruktor ({filename}) {
        this.filename = Dateiname
    }
    // Gleiches Vorlagenformat, definiere die Apply-Methode apply (Compiler) {
        compiler.hooks.emit.tap('FileListPlugin', (Kompilierung) => {
            // Assets statische Ressourcen, können Kompilierungsparameter ausdrucken, und es gibt viele Methoden und Eigenschaften let asset = compilation.assets;
            
            // Definieren Sie die Struktur des Ausgabedokuments let content = `## Dateiname Ressourcengröße\r\n`
            
            // Statische Ressourcen durchlaufen und Ausgabeinhalte dynamisch kombinieren Object.entries(assets).forEach(([filename, stateObj]) => {
                Inhalt += `- ${Dateiname} ${stateObj.size()}\r\n`
            })
            
            // Ausgaberessourcenobjekt asset[this.filename] = {
                Quelle () {
                    Inhalt zurückgeben;
                },
                Größe () {
                    Inhalt.Länge zurückgeben
                }
            }
            
        })
    }
}
// Exportieren module.exports = FileListPlugin

let path = require('Pfad')
let HtmlWebpackPlugin = erfordern('html-webpack-plugin')
// Das Plugin-Verzeichnis befindet sich auf derselben Ebene wie node_modules, benutzerdefinierte Plugins, ähnlich dem Loader let FileListPlugin = require('./plugins/FileListPlugin')

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: './src/index.js',
    Ausgabe: {
        Dateiname: „build.js“,
        Pfad: Pfad.auflösen(__dirname, 'dist')
    },
    Plugins: [
        neues HtmlWebpackPlugin({
            Vorlage: './src/index.html',
            Dateiname: „index.html“
        }),
        neues FileListPlugin({
            Dateiname: „list.md“
        })
    ]
}