Как правильно писать HTML-ссылки в webpack-е?

Question

[Никита Киселёв]

Я искал решение в интернете, но ничего не смог найти про это (возможно всё очевидно, а я тупенький)))

Итак
У меня есть папка со страницами сайта


В index.pug есть ссылка на ui-kit.pug:

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

При сборке, webpack создаёт два файла html, всё верно, но никак не заменяет эту ссылку на корректную.

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

Следовательно ссылка не работает, ведь в dist всё выглядит иначе:

Собственно, сам вопрос:
Как мне поступить что бы это работало? Нужно ли как-то делать, чтобы в dist создавались папки, или webpack должен сам корректировать ссылки на правильные?

UPD:

Так же .pug преобразуется .html, возможно тебе это надо +button_gradient('UI-Kit/ui-kit.html', 'UI-Kit страница 1')

Да, тоже сначала об этом подумал, но это тоже не работает. Суть в том, что после сборки он, как и велит ссылка, - пытается найти папку UI-kit, и в ней найти файл ui-kit.html. Но так как в папке dist все файлы просто кидаются в одну кучу, он, естественно папки там не находит, следовательно, пути до ui-kit.html тоже.

Можно конечно сразу писать ссылки без подпапки (просто href="ui-kit.html"), но если станицу будет больше, это же какой гемор будет во всём этом разбираться. Потому я и подумал, что возможно webpack как-то умеет исправлять ссылки на свои (после сборки), но я об этом не знаю.

Answer 1

[Никита Киселёв]

В общем, автогенерируемые ссылки я так и не понял можно ли делать (ну например которые используются для картинок или других ресурсов, путь до которых вебпак сам редачит)

Но я просто дописал в имени итогового файла название папки, и он корректно создал папку и поместил в него .html файл

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

Answer 2

[inkShio]

Тут дело не в вебпаке, как понимаю. А не понимании как подключить ui kit?

include UI-Kit/ui-kit.pug
+button_gradient('yandex.ru', 'YANDEX TEXT')

Наверное тебе нужно это, а может и нет из твоего описания мало, что понятно.

Так же .pug преобразуется .html, возможно тебе это надо +button_gradient('UI-Kit/ui-kit.html', 'UI-Kit страница 1') ?

Comments

[Никита Киселёв]

Извиняюсь, если что-то не ясно, постараюсь дополнить проблему:

include UI-Kit/ui-kit.pug

Нет, мне не нужно встраивать ui-kit.pug в index.pug

Так же .pug преобразуется .html, возможно тебе это надо +button_gradient('UI-Kit/ui-kit.html', 'UI-Kit страница 1')

Да, тоже сначала об этом подумал, но это тоже не работает. Суть в том, что после сборки он, как и велит ссылка, - пытается найти папку UI-kit, и в ней найти файл ui-kit.html. Но так как в папке dist все файлы просто кидаются в одну кучу, он, естественно папки там не находит, следовательно, пути до ui-kit.html тоже.

Можно конечно сразу писать ссылки без подпапки (просто href="ui-kit.html"), но если станицу будет больше, это же какой гемор будет во всём этом разбираться. Потому я и подумал, что возможно webpack как-то умеет исправлять ссылки на свои (после сборки), но я об этом не знаю.

[inkShio]

Никита Киселёв, Ну походу уже, что то проясняется.
Если ты хочешь, что бы pages/UI-Kit/ui-kit.pug компилился в dist/UI-Kit/ui-kit.html то это webpack.
Сейчас получается у тебя должно работать так +button_gradient('ui-kit.html', 'UI-Kit страница 1')

[Никита Киселёв]

inkShio, ну я и спрашиваю как это обычно делают люди, которые с webpack работают :/
Переносят ли с папками, если да - то как; если нет - то как иначе?