Codebeispiele zum Erstellen mehrseitiger Anwendungen mit Webpack

Dieser Artikel enthält Codebeispiele zur Verwendung von Webpack zum Erstellen mehrseitiger Anwendungen. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Hintergrund: Da die drei großen Front-End-Frameworks React, Vue und Angular im Front-End-Bereich stabiler werden, werden SPA-Anwendungen in immer mehr Projekten eingesetzt. In einigen speziellen Anwendungsszenarien müssen jedoch herkömmliche mehrseitige Anwendungen verwendet werden. Bei der Nutzung von Webpack für den Projektierungsbau sind ebenfalls entsprechende Anpassungen erforderlich.

Unterschiede zu SPA-Anwendungen

In SPA-Anwendungen werden nach der Verwendung von Webpack zum Erstellen des Projekts eine HTML-Datei, mehrere JS-Dateien und mehrere CSS-Dateien generiert. In der HTML-Datei wird auf alle JS- und CSS-Dateien verwiesen.
In einer mehrseitigen Anwendung werden nach der Verwendung von Webpack zum Erstellen des Projekts mehrere HTML-Dateien, mehrere JS-Dateien und mehrere CSS-Dateien generiert. In jeder HTML-Datei wird nur auf die der Seite entsprechenden JS- und CSS-Dateien verwiesen.

Webpack-Konfiguration

Eintragseinstellungen

Die Verpackung mehrseitiger Anwendungen entspricht mehreren Eintrags-JS-Dateien und mehreren HTML-Vorlagendateien. Nehmen wir an, dass unser mehrseitiges Verzeichnis im Entwicklungsstatus wie folgt aussieht:

    |--page1
        |--index.html
        |--index.js
        |--index.less
    |--page2
        |--index.html
        |--index.js
        |--index.less

enthält die Seiten page1 und page2 sowie die entsprechenden Dateien js und less. Wenn Sie dann webpack zum Erstellen eines Projekts verwenden, gibt es zwei Eingabedateien page1->index.js und page2->index.js sowie zwei Vorlagendateien page1->index.html und page2->index.html. Beim Erstellen eines Projekts ist es jedoch nicht möglich, für jede Seite eine Eintragskonfiguration anzugeben.
Um alle Seiteneinträge und Vorlagendateien automatisch abzugleichen, gibt es zwei Methoden.

Methode 1: Verwenden Sie das node-Dateisystem von fs. um alle Unterordner unter dem übergeordneten Ordner zu lesen. Alle Seiten werden automatisch nach Ordnernamen abgeglichen. Bei dieser Methode müssen jedoch die Dateien im übergeordneten Ordner sauber gehalten werden. Andernfalls muss eine spezielle Beurteilungslogik verwendet werden, um alle Eintragsverzeichnisse herauszufiltern.

Methode 2: Konfigurieren Sie den Eingang über die Konfigurationsdatei. Zum Beispiel:

    entry: ['page1', 'page2'];

Auf diese Weise können alle Eintragsverzeichnisse genau angegeben werden. Allerdings müssen Sie jedes Mal, wenn Sie eine Seite hinzufügen, die Konfigurationsdatei ändern.
Beide Methoden haben ihre eigenen Eigenschaften und können je nach den spezifischen Umständen ausgewählt werden.

Spezifische Konfiguration

Eintrag

Die Eintragskonfiguration muss basierend auf den von uns erhaltenen Eintragsdaten zyklisch hinzugefügt werden.

    const entryData = {};
    entry.forEach(function (item) {
        entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
    })

Ausgabe

Die Konfiguration der Ausgabe stimmt mit der SPA-Anwendung überein und es ist keine spezielle Konfiguration erforderlich.

    output: {
        filename: 'public/[name]_[chunkhash:8].js',
        path: path.join(__dirname, `../dist/`),
        publicPath: '/'
    },

HtmlWebpackPlugin

bei Erstellung mit webpack. Sie müssen das Plug-in html-webpack-plugin verwenden, um Projektvorlagen zu generieren. Für mehrseitige Anwendungen, die mehrere Vorlagen generieren müssen, müssen auch mehrere html-Vorlagendateien generiert werden. Verwenden Sie auf ähnliche Weise die erhaltenen Eingabedateidaten, um sie in einer Schleife hinzuzufügen.

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlWebpackPluginData = [];
    entry.forEach(function (item) {
        HtmlWebpackPluginData.push(
            new HtmlWebpackPlugin({
                filename: `${item}.html`,
                template: path.join(__dirname, `../src/pages/${item}/index.html`),
                chunks: [item]
            })
        );
    })

muss konfiguriert sein. Wenn nicht, werden alle chunks- und js-Dateien in jede Vorlagendatei importiert. Wenn als Konfiguration css in entry angegeben, werden nur Dateien importiert, die sich auf diesen Eintrag beziehen. name

Konfigurationskombination

Der nächste Schritt besteht darin, die vorherigen Konfigurationen

, entry, output zu kombinieren, sodass keine separaten Konfigurationen erforderlich sind Verarbeitung. Die Kombination ist wie folgthtmlWebpackPlugin

    modules.exports = {
        entry: { ...entryData },
        output: {
            filename: 'public/[name]_[chunkhash:8].js',
            path: path.join(__dirname, `../dist/`),
            publicPath: '/'
        },
        plugins: [
            ...HtmlWebpackPluginData
        ]
        ...
    }

Die vollständige Demo kann angesehen werden

Mehrseitige Anwendungsdemo

Das obige ist der detaillierte Inhalt vonCodebeispiele zum Erstellen mehrseitiger Anwendungen mit Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!