Implémentation de la configuration plusieurs-à-plusieurs dans webpack (code ci-joint)

Le contenu de cet article concerne l'implémentation de la configuration plusieurs-à-plusieurs dans webpack (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Webpack est une excellente plate-forme d'empaquetage qui peut regrouper toutes les ressources statiques telles que sass, images, polices, etc. en js

L'auteur a récemment transformé un site Web statique traditionnel. Afin de réduire les requêtes http, l'une des stratégies consiste à regrouper plusieurs ressources statiques (telles que polices, CSS, images, js) correspondant à une seule page Web statique dans un fichier js, puis à associer chaque code HTML au js indépendant correspondant. D'accord

J'ai trouvé des informations pertinentes sur la configuration du webpack sur Internet. Les relations correspondantes entre html et js sont "un-à-un" et "plusieurs-à-un", mais il y a rarement "plusieurs-à-un". -many". Implémenté

, mais après quelques tentatives, je l'ai finalement configuré. Ici, je partagerai la syntaxe liée au fichier de configuration

//entry入口文件支持json的形式
    entry: {
            "static/pc/js/index": "./webStatic/pc/js/index.js",        
            "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",        
            "static/mobile/js/index": "./webStatic/mobile/js/index.js",        
            "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
    },
    output: {
        path: path.resolve(__dirname, ''),        
        //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
        filename: '[name].js'
    }

Instructions de configuration

webStatic dans le répertoire racine C'est l'emplacement où le code source est placé. Le static dans le répertoire racine est l'emplacement où js est sorti

Le fichier de configuration a un total de quatre mappages : webStatic/pc/. js/index.js est sorti dans static/pc/js/index js, ./webStatic/pc/js/article-details.js est sorti dans static/pc/js/article-details.js, ./webStatic/. mobile/js/index.js est sorti vers static/mobile/js/index js, ./webStatic/mobile/js/article-details.js est sorti vers static/mobile/js/article-details.js

pour ajouter d'autres mappages plus tard, ajoutez-les simplement selon le format dans l'entrée. (Il suffit de le copier face à face)

Résumé :

Pour maintenir un ancien site Web, c'est pas pratique de réécrire toutes les pages à l'aide des composants React ou Vue en peu de temps, mais utilisez webpack pour le packager, c'est toujours faisable. Après avoir configuré webpack avec plusieurs entrées et plusieurs sorties, il vous suffit d'apporter quelques modifications au site Web. , et vous pouvez volontiers écrire des sites Web en utilisant scss, es6 et d'autres syntaxes

Recommandations associées :

Échafaudage de projet à entrées multiples implémenté par webpack

Explication détaillée de l'empaquetage des pages de fichiers à entrées multiples Webpack

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!