Работа с pug(jade)-шаблонами в проекте с помощью webpack

757
27 декабря 2016, 02:06

Как можно преобразовать pug-файлы в html-шаблоны без их явного импортирования в точку входа?

Проект содержит шаблоны, стили, скрипты для каждого приложения, которые лежат в отдельном каталоге. Папка фронтенда:

├── frontend
│   ├── common
│   ├── node_modules
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── ...
│   └── webpack.config.js

Папка каждого приложения содержит разное количество шаблонов:

├── app
│   ├── static
│   │   └── app
│   │       ├── css
│   │       └── js
│   └── templates
│       └── app
│           ├── app__tmp2.pug
│           ├── app.pug
│           ├── app__tmp1.pug
│           └── app__settings.pug

Соответственно их явное импортирование может быть неудобно.

В документации вебпака довольно мало написано о работе с препроцессорами шаблонов и для их работы необходимо явное импортирование. Мне же нужно, чтобы сборщик проходил рекурсивно все каталоги и оставлял преобразованный файл в месте исходника.

Попробовал решить проблему сам:

  1. Использовал pug-loader
  2. По совету Умеренно Упоротая Утка из моего вопроса по Сборка отдельных css и скриптов в общие файлы решил попробовать glob для обхода каталогов и включить шаблоны как точки входа (да, наверно, это выглядит странно). Часть моего конфига вебпака с лоадерами и точками входа:

    entry: {
      index: "./index.js",
      pug: glob.sync([path.join(__dirname + '/*.pug')])
    }
    ,
    output: {
      path: __dirname,
      filename: "[name].js"
    },
    module: {
     loaders: [{
      test: /\.pug/,
      loader: 'pug'
    }
    

Но при попытке сборки вебпак начинает бесконечно собирать проект.

Как правильно работать с шаблонами в проекте? Мой способ может работать? Где я допуская ошибки?

READ ALSO
Окрашивание активной строки в цвет

Окрашивание активной строки в цвет

Имеется функция которая окрашивает нажатую (активную) строку в голубой цвет, путем добавления строке класса blue_rowНужно доработать функцию,...

316
Fullcalendar Scheduler Браузер зависает когда slotDuration 1 секунда

Fullcalendar Scheduler Браузер зависает когда slotDuration 1 секунда

Так как я работаю с видео файлами, нужно чтобы точность slotDuration была 1 секунда, но при такой точности браузер зависает, так как должен рендерить...

450
Передача значения по ссылке

Передача значения по ссылке

Допустим, на сайте есть 4 страницы:

372