How to build a multi-page BEM project with dependencies on Gulp4 and / or Webpack4?

I have only recently started to master the BEM methodology comprehensively (before that I used only BEM naming). I really liked this concept and would like to fully implement it in my workflow. However, since I don't have enough experience and I know JavaScript quite superficially, I don't have enough knowledge to file my "bike" for Gulp4 and/or Webpack4. And ready-made solutions from Yandex like bem-tools, enb and other specific solutions do not suit me because of their congestion and, as it seems to me, complexity.

Introductory notes: 1) html template engine: Pug; 2) css preprocessor: Sass; 3) Vanilla JS

I would like to be able to pull data into pug templates from data.json - file or similar data.js, as well as declaratively define the structure of BEM boxes, taking into account the corresponding dependencies.

If it is very short, then you need here from such a structures:

Get the output like this:

It doesn't matter to me what to build on, whether it's Gulp, Webpack or their joint use, the main thing is to get the expected and predictable result. I hope I was able to express myself clearly and get my point across. What are your thoughts on this? :) Thank you all in advance.