How to work with dependencies in Webpack?

Question

Sass

How to use webpack to automatically attach only those css\js files that are in use?

For example, there are ten components and they are divided into folders - these are templates (pug) that have styles (css) and behavior (js).
On one page, the first, second, and fifth template is used, on the other, the seventh, third, and tenth, and so on. Accordingly, for each page, you need to upload css and js files corresponding to the templates, as well as the templates on which these templates depend.

There is a problem with manually writing imports if there are many pages. At least because some components depend on others, and keeping all these dependencies in mind is tedious and unproductive.

How to make webpack take into account the dependencies of the components used during the build?

As I understand it, you can create a js file with dependencies - where it will be indicated that such and such css is needed, such and such another pug template (with its own dependencies, which must also be taken into account), such and such a js script. But how to process this in webpack, in what order and at what time, is not at all clear.
And at the same time, nothing needs to be duplicated once again.

Answer 1

Split into multiple entry points
Set up the SplitChunkPlugin