javascript - Sie verstehen die Modulverpackungsideen von Webpack nicht ganz?

Question

Ich lerne Webpack anhand der offiziellen Webpack-Dokumentation.
Am Anfang verarbeitete Webpack alle Ressourcen als Module und packte sie in Bundles. Es sieht ziemlich gut und sehr attraktiv aus.

Aber als ich es später sah, war ich verwirrt über das Konzept der Verpackung.

Angesichts der Codetrennung heißt es, dass die CSS- und Drittanbieter-Bibliotheksdateien separat in ein Bundle gepackt werden müssen, um den parallelen Lade- und Caching-Mechanismus des Browsers vollständig nutzen zu können.

Ist das nicht das Ergebnis, dass die herkömmliche Verwendung von Tags zum Einführen von Ressourcen durch die Verwendung von „require“ zum Anzeigen des Ladens in js geändert wird?
Was sind also neben der expliziten Deklaration von Abhängigkeiten die Vorteile der Modulverpackung?

Als ich die Stelle sah, an der der Code getrennt ist, dachte ich: Warum muss ich Module verpacken, da er getrennt werden muss?

Gibt es irgendwelche Vorteile, dieses Modul zu verpacken?

Answer 1

比如说，分离css那里。要先require把css引入，然后用插件单独打包成一个bundle，然后在html里用标签引入。

我为什么要多此一举，打包一下？直接像常规做法那样html里用标签引入不是更好吗？

Answer 2

模块化是为了写代码方便，打包是为了运行代码方便

另外webpack是可以分开打包的

Answer 3

如果你做SPA，或者如果你不使用scss，postcss，图片压缩，图片base64自动转换，手动插入CSS或者JS其实问题不算大。做一个vue多页面的项目，可能会体会到js或者css自动插入到html的便利之处了。

以前手动link方式引入css的时候，为了方便，我会将所有的css内容放在同一个文件中，否则又要加link，但是所有的css在一个文件，开发其实是不方便的。有的webpack之后，我可以让css文件尽量切分，从文件结构上就变得清晰

webpack的关于CSS的的好处，暂时就想到这么些