Страницы

Поиск по вопросам

среда, 17 июля 2019 г.

Как правильно настроить webpack, для работы с pug файлами

Возникли проблемы с настройкой webpack
Надо, чтобы в проекте была динамическая HTML-страница. Лучше, чтобы она пререндерилась на сервере. Сам фреймворк: Adonis, однако стандартный template language в нем не такой удобный (edge - файлы). Посему решил использовать Pug
Сама структура проекта такая: есть папка source, в ней папки для каждой страницы / компонента. После билда webpack'ом все попадает в нужные места: public и views.
Все, кроме картинок. Я так и не понял, как по правильному настроить webpack, так, чтобы он не компилировал pug в html и менял ссылки в img src (в случае JPG/JPEG/PNG - это image/[name].[ext], а в случае SVG - icon/[name].svg).
И вообще: правильно ли таким образом использовать pug? Или лучше его использовать только во время билда?
Сейчас я использую следующий способ: Добавляю pug файл в webpack с помощью: html-webpack-plugin, после использую html-webpack-pug-plugin, чтобы в файл добавлялись link и script pug-вида. Я так понимаю, надо настроить loader, такая конструкция:
{ test: /\.pug$/, loaders: ['html-loader', 'pug-html-loader'] }
работает, однако на выходе получаю файл с дефолтным HTML шаблоном.


Ответ

Появилось решение: https://www.npmjs.com/package/pug-asset-loader С помощью этого плагина, можно обрабатывать pug файлы, используя функцию pal() для относительного пути, который будет заменен после сборки.

Комментариев нет:

Отправить комментарий