Как подружить webpack и jade(pug)?

Уже есть сборка на webpack, нужно было вместо html использовать какой нибудь шаблонизатор, так вот по какому принципу они работают?

Тут написано, https://github.com/pugjs/pug-loader

var template = require("pug!./file.pug");
// => returns file.pug content as template function

// or, if you've bound .pug to pug-loader
var template = require("./file.pug");

var locals = { /* ... */ };

var html = template(locals);
// => the rendered HTML


Как получить html-ку?

Или в этом https://github.com/at0g/nunjucks-loader
  • Вопрос задан
  • 10597 просмотров
Пригласить эксперта
Ответы на вопрос 2
zhekaus
@zhekaus
Coder and Project Manager
Если на примере pug-loader, то вот так.

В webpack.config.js :
{test: /\.(pug|jade)$/, loader: 'pug-loader'},
Не забываем про file-loader:
{test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/, loader: "file-loader"}


Картинки и прочее в .pug с таким pug-loader придется вставлять так:
a(href="http://www.zipir.ru"): img(src=require('../../assets/img/engme_ru_logo.png'))


Если шаблон вставляется в Angular, то придется подключать так:
@Component({
    selector: 'app-home',
    template: require('./home.component.pug')(),
})
Ответ написан
Комментировать
littleguga
@littleguga
Не стыдно не знать, а стыдно не интересоваться.
В переменной html и будет отрендеренный html. Выводите его туда, куда нужно.

Подробнее, как использовать loaders - написано в доках: https://webpack.github.io/docs/using-loaders.html
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы