javascript - Vous ne comprenez pas très bien les idées d'empaquetage de modules de Webpack?

Question

J'apprends webpack grâce à la documentation officielle de webpack ;
Au début, webpack traitait toutes les ressources sous forme de modules et les regroupait dans des bundles. Il a l'air plutôt bien et très attrayant.

Mais quand je l'ai vu plus tard, j'étais confus quant au concept d'emballage.

Voyant la séparation du code, il est indiqué que pour utiliser pleinement le mécanisme de chargement et de mise en cache parallèle du navigateur, les fichiers CSS et les bibliothèques tierces doivent être regroupés séparément dans un bundle.

Le résultat n'est-il pas que l'utilisation conventionnelle de balises pour introduire des ressources soit remplacée par l'utilisation de require pour afficher le chargement en js ?
Donc, en plus de déclarer explicitement les dépendances, quels sont les avantages du packaging de modules ?

En voyant l'endroit où le code est séparé, je me suis demandé, puisqu'il doit être séparé, pourquoi dois-je empaqueter des modules ?

Y a-t-il des avantages à emballer ce module ?

Answer 1

Par exemple, séparez les CSS ici. Vous devez d'abord exiger que le CSS soit introduit, puis utiliser un plug-in pour le regrouper séparément dans un bundle, puis utiliser des balises pour l'introduire dans le HTML.

Pourquoi devrais-je me donner la peine de l'emballer ? Ne serait-il pas préférable d'utiliser simplement les balises en HTML comme d'habitude ?

Answer 2

La modularisation est destinée à faciliter l'écriture du code, et le packaging est destiné à faciliter l'exécution du code

De plus, le webpack peut être emballé séparément

Answer 3

Si vous faites du SPA, ou si vous n'utilisez pas scss, postcss, la compression d'image ou la conversion automatique d'images en base64, l'insertion manuelle de CSS ou de JS n'est en fait pas un gros problème. Lorsque vous travaillez sur un projet Vue multipage, vous réaliserez peut-être la commodité d'insérer automatiquement du js ou du css dans du HTML.

Dans le passé, lorsque j'introduisais les CSS via des liens manuels, pour plus de commodité, je mettais tout le contenu CSS dans le même fichier, sinon je devrais ajouter un lien. Cependant, il n'est pas pratique de développer tous les CSS dans un seul fichier. Après un peu de webpack, je peux diviser le fichier CSS autant que possible et la structure du fichier deviendra claire

Les avantages de Webpack concernant le CSS, c'est tout ce à quoi je pense pour le moment