Exemples de code pour créer des applications multipages à l'aide de Webpack

Cet article vous propose des exemples de code sur l'utilisation de webpack pour créer des applications multipages. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Contexte : Alors que les trois principaux frameworks front-end, React, Vue et Angular, deviennent plus stables dans le domaine front-end, les applications SPA sont appliquées à de plus en plus de projets. Cependant, dans certains scénarios d'application spéciaux, des applications multipages traditionnelles doivent être utilisées. Lors de l'utilisation de Webpack pour la construction d'ingénierie de projet, des ajustements correspondants sont également nécessaires.

Différences par rapport aux applications SPA

Dans les applications SPA, après avoir utilisé webpack pour construire le projet, un fichier html, plusieurs fichiers js et plusieurs fichiers css seront générés. Dans le fichier html, tous les fichiers js et css seront référencés.
Dans une application multipage, après avoir utilisé webpack pour créer le projet, plusieurs fichiers html, plusieurs fichiers js et plusieurs fichiers css seront générés. Dans chaque fichier html, seuls les fichiers js et css correspondant à la page sont référencés.

Configuration du Webpack

Paramètres d'entrée

Le packaging des applications multipages correspondra à plusieurs fichiers js à entrées et à plusieurs fichiers modèles html. Supposons que notre répertoire multipage en état de développement ressemble à ceci :

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

comprend deux pages, page1 et page2, et leurs fichiers js et less correspondants. Ensuite, lorsque vous utilisez webpack pour créer un projet, il y a deux fichiers d'entrée page1->index.js et page2->index.js, et deux fichiers modèles page1->index.html et page2->index.html. Cependant, lors de la construction d'un projet, il est impossible de spécifier une configuration d'entrée pour chaque page.
Pour faire correspondre automatiquement toutes les entrées de page et tous les fichiers modèles, il existe deux méthodes.

Méthode 1 : Utiliser le système de fichiers node de fs. pour lire tous les sous-dossiers du dossier parent. Toutes les pages sont automatiquement mises en correspondance par nom de dossier. Cependant, cette méthode nécessite de garder les fichiers du dossier parent propres. Sinon, une logique de jugement spécifique doit être utilisée pour filtrer tous les répertoires d'entrées.

Méthode 2 : Configurer l'entrée via le fichier de configuration. Par exemple :

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

De cette façon, tous les répertoires d'entrées peuvent être spécifiés avec précision. Cependant, chaque fois que vous ajoutez une page, vous devez modifier le fichier de configuration.
Les deux méthodes ont leurs propres caractéristiques et peuvent être choisies en fonction de circonstances spécifiques.

Configuration spécifique

entrée

la configuration d'entrée doit être ajoutée cycliquement en fonction des données d'entrée que nous obtenons.

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

sortie

La configuration de la sortie est cohérente avec l'application SPA et aucune configuration particulière n'est requise.

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

HtmlWebpackPlugin

lorsqu'il est construit avec webpack. Vous devez utiliser le plug-in html-webpack-plugin pour générer des modèles de projet. Pour les applications multipages qui doivent générer plusieurs modèles, plusieurs fichiers modèles html doivent également être générés. De même, utilisez les données du fichier d’entrée obtenues pour ajouter une boucle.

    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]
            })
        );
    })

Configuration chunks doit être configurée. S'il n'est pas configuré, tous les fichiers js et css seront importés dans chaque fichier modèle. Si spécifié comme configuration entry dans name, seuls les fichiers liés à cette entrée seront importés.

Combinaison de configuration

L'étape suivante consiste à combiner les configurations précédentes entry, output, htmlWebpackPlugin Les autres configurations sont cohérentes avec l'application SPA, pas besoin de faire de séparation. traitement. La combinaison est la suivante

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

La démo complète peut être consultéeDémo de l'application multipage

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!