Detaillierte Erklärung zur Verwendung des HTML-Webpack-Plugins

Kürzlich habe ich html-webapck-plugin zum ersten Mal in einem React-Projekt verwendet. Es hat zwei Hauptfunktionen:

Dynamisches Hinzufügen von Hashes nach jeder Kompilierung für externe Ressourcen wie Skripts und Links in HTML-Dateien, um Probleme beim Verweisen auf zwischengespeicherte externe Dateien zu vermeiden

Sie können HTML-Eintragsdateien generieren und erstellen. Beispielsweise kann eine einzelne Seite einen HTML-Dateieintrag generieren. Durch die Konfiguration von N html-webpack-plugin können N Seiteneinträge generiert werden.

1. Installation

cnpm ich webpack-plugin -D

2. Referenz in webpack.config.json

const Pfad = require('Pfad')
const htmlWebpackPlugin = require('html-webpack-plugin') //Erster Schrittmodule.exports = {
    Eintrag: Pfad.join(__dirname, './src/main.js'),
    Ausgabe: {
        Pfad: Pfad.join(__dirname, './dist'),
        Dateiname: „bundle.js“,
    },
    Modus: "Entwicklung",
    devServer: {
        offen: wahr,
        Port: 8080,
        heiß: wahr,
        Inhaltsbasis: „Quelle“
    },
    Plugins: [
        new htmlWebpackPlugin({ //Schritt 2 template: path.join(__dirname, './src/index.html'), //Geben Sie den Pfad der generierten Vorlage an filename: 'index.html' //Geben Sie den Namen der generierten Seite an })
    ]
}

3. Die Rolle des HTML-Webpack-Plugins

1. Generieren Sie eine Datei der angegebenen Vorlage im Speicher, auf die schneller zugegriffen werden kann. 2. Fügen Sie der angegebenen Vorlagendatei automatisch die Datei bundle.js hinzu

Zusammenfassen

Dies ist das Ende dieses Artikels zur detaillierten Verwendung des HTML-Webpack-Plugins. Weitere Informationen zur Verwendung des HTML-Webpack-Plugins 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!