How to write HTML links in webpack?

Question

HTML

I searched for a solution on the Internet, but I could not find anything about it (maybe everything is obvious, but I'm dumb)))

So
I have a folder with site pages


In index.pug there is a link to ui-kit.pug:

+button_gradient('UI-Kit/ui-kit.pug', 'UI-Kit страница 1')

When building, webpack creates two html files, everything is correct, but does not replace this link with the correct one.

<a class="button_gradient" href="UI-Kit/ui-kit.pug">UI-Kit страница 1</a>

Therefore, the link does not work, because in dist everything looks different:

Actually, the question itself is:
How can I do this to make it work? Do I need to do something so that folders are created in dist, or does webpack itself correct the links to the correct ones?

UPD:

Also .pug is converted to .html, maybe you need it +button_gradient('UI-Kit/ui-kit.html', 'UI-Kit page 1')

Yeah, I thought about that too, but it doesn't work either. The bottom line is that after the assembly, as the link says, it tries to find the UI-kit folder, and find the ui-kit.html file in it. But since in the dist folder all the files are simply thrown into one heap, he, of course, does not find the folder there, therefore, the path to ui-kit.html too.

Of course, you can immediately write links without a subfolder (just href="ui-kit.html"), but if the page is larger, it's what kind of hemorrhoid will understand all this. That's why I thought that perhaps webpack somehow knows how to fix links to its own (after assembly), but I don't know about it.

Answer 1

In general, I still don’t understand whether auto-generated links can be done (well, for example, which are used for pictures or other resources, the path to which the webpack itself edits)
But I just added the name of the folder in the name of the final file, and it correctly created the folder and placed it in its .html file

new HTMLWebpackPlugin({
      filename: 'UI-kit/ui-kit.html',
      template: './pages/UI-kit/ui-kit.pug'
    }),

Answer 2

It's not about webpack, as I understand it. And not understanding how to connect a ui kit?
include UI-Kit/ui-kit.pug
+button_gradient('yandex.ru', 'YANDEX TEXT')
Probably you need it, or maybe not, it's not clear from your description.
Also .pug is converted to .html, maybe you need +button_gradient('UI-Kit/ui-kit .html ', 'UI-Kit page 1') ?