javascript - Don't quite understand webpack's module packaging ideas?

Question

I am learning webpack through the official webpack documentation;
At the beginning, webpack processed all resources as modules and packaged them into bundles. It looks pretty good and very attractive.

But when I saw it later, I was confused about the concept of packaging.

Seeing the code separation, it is said that in order to make full use of the browser's parallel loading and caching mechanism, the css and third-party library files must be packaged separately into a bundle.

The result is that the conventional use of tags to introduce resources is changed to the use of require to display loading in js?
So besides explicitly declaring dependencies, what are the advantages of module packaging?

Seeing the place where the code is separated, I was thinking, since it needs to be separated, why do I need to package the module?

Are there any benefits to packaging this module?

Answer 1

For example, separate the css there. You need to first require the css to be introduced, then use a plug-in to package it into a bundle separately, and then use tags to introduce it in the html.

Why should I go to the trouble of packing it? Wouldn't it be better to just use tags in HTML as usual?

Answer 2

Modularization is for the convenience of writing code, and packaging is for the convenience of running the code

In addition, webpack can be packaged separately

Answer 3

If you do SPA, or if you don’t use scss, postcss, image compression, automatic image base64 conversion, manually inserting CSS or JS is actually not a big problem. When working on a Vue multi-page project, you may realize the convenience of automatically inserting js or css into html.

In the past, when I introduced css by manual link, for convenience, I would put all css content in the same file, otherwise I would have to add a link. However, it is inconvenient to develop all css in one file. After some webpack, I can split the css file as much as possible, and the file structure will become clear

Webpack’s benefits about CSS, that’s all I can think of for the moment