Component-based Front-end: html templates without framework. How to share markup the same way as scripts and styles?

Question

HTML

I am a junior front-ender, I have not worked anywhere yet, I have not fulfilled orders, only for myself, zero experience.
Finishing up my webpack build, I want component support, but I can't organize templates. I decided to stick to the BEM methodology, read part of the documentation, got to html, they stick their bem-xjst there, I don’t want to use such narrowly focused tools, plus you can integrate it with webpack (there is no documentation, do whatever you want), you need something simpler . Please look at the project structure, how to implement templates? I know that there is a component approach in Vue and React, but I should probably learn the basics better first, can't implement components without some such heavy libraries / frameworks? That is, as I understand it, I need my templates to be rendered on the server (during assembly), and not in the client's browser. What tools to do this, how is it arranged on large projects?
I tried handlebars, but I didn’t manage to make friends with webpack and BEM normally, some kind of bad bunch .. I also know that there is pug, but personally it seems to me that this is a tool for perverts, I don’t like the syntax. As I understand it, this is a preprocessor, but I don’t like them, I write in vanilla, I recently switched from SCSS to CSS. How to be in such cases? I got stuck. Of course, you can write html manually, but it's much more difficult to maintain, especially on multi-pagers, if I want to change the markup of one component, I have to look for it and replace it everywhere, it's terribly inconvenient.
Or, in principle, there are no options, and if I want a full-fledged component, should I go learn frameworks?
I'm counting on a complete separation into components: from the header to the buttons.

Answer 1

I don’t quite understand your reluctance to start learning React or Vue, there is nothing particularly complicated there, and they are used now in a lot of places, that is, you definitely won’t be left without work. I would still suggest React because it is mostly focused on rendering, Vue is more versatile.
Handlebars/Pug and so on are now mostly on legacy projects.

Answer 2

I use tars build, pug and bemto.
By structure - pug, js and css files of each component in their own folder.
In pug, a block is a mixin. I either write the data hard, or pass it in the data parameter and substitute it if they change in different places.
I got used to the syntax in one project.

mixin page-header(data)
    +b.page-header       
       +e.A.logo(href='/')  
       +e.A.tel(href='tel:[phone]') [phone]
       +e.A.btn(href='#')!=data.btnText

Answer 3

Google: "includeHTML github.com"
Should work.

Answer 4

The html-loader has a ?interpolate flag, you can split your files into "components" (actually it's just the division of html code into files)
The syntax looks like this
<div>${require('./components/gallery.html')}</div>