Eine kurze Analyse der Verwendung des HTML-Webpack-Plugins

Wenn Sie zum Starten der Seite das Plugin „html-webpack-plugin“ verwenden, können Sie die HTML-Seite in den Speicher legen, um die Seitenladegeschwindigkeit zu erhöhen und den Pfad der auf der Seite „index.html“ eingeführten JS-Datei automatisch festzulegen.

Voraussetzung: Webpack ist im Projekt installiert. Schritte:

Schritt 1. Geben Sie cnpm i html-webpack-plugin -D im Stammverzeichnis des Projekts ein, um das Plugin html-webpack-plugin in der Entwicklungsabhängigkeit zu installieren. Seine Funktion besteht darin, die entsprechende HTML-Seite im Speicher entsprechend der angegebenen Vorlagenseite zu generieren.

Schritt 2 : Ändern Sie die Konfigurationsdatei von webpack.config.js , nachdem das Plug-In installiert wurde

Importieren Sie das Plug-In „html-webpack-plugin“ in die Konfigurationsdatei und konfigurieren Sie den Vorlagenseitenpfad und den generierten Seitennamen.

const path = require("Pfad")
// HTML-Webpack-Plugin importieren
const htmlWebpackPlugin = erfordern("html-webpack-plugin")

module.exports={
    Eintrag:Pfad.join(__dirname,"./src/main.js"),
    Ausgabe:{
        Pfad:Pfad.join(__dirname,"./dist"),
        Dateiname: „bundle.js“
    },
    //Plugin-Knoten konfigurieren plugins:[
        // html-webpack-plugin-Plugin erstellen neues htmlWebpackPlugin({ // Parameter festlegen template:path.join(__dirname,"./src/index.html"), // Vorlagenseite angeben, um die Seite entsprechend der angegebenen Seite im Speicher zu generieren filename:"index.html" // Namen der generierten Seite im Speicher angeben })
    ]
}

Nach der Verwendung des Plugins „html-webpack-plugin“ muss der Referenzpfad von bundle.js nicht mehr manuell verarbeitet werden, da der richtige Pfad von bundle.js automatisch in die generierte HTML-Seite im Speicher eingefügt wurde .

Zusammenfassung – Was Plugins tun:

1. Generieren Sie automatisch eine Seite im Speicher basierend auf der angegebenen Seite

2. Füge das gepackte bundle.js automatisch in die Seite ein

Dies ist das Ende dieses Artikels über das Tutorial zur Verwendung des HTML-Webpack-Plugins. Weitere Informationen zum HTML-Webpack-Plugin finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!