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

Question

[lavezzi1]

Уже есть сборка на 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

Comments

[Evgeny Erofeev]

Удалось ли разоюраться? У меня pug-loader не зарботал с webpack 2.2+ а pug-html-loader отказывается тягать внедренные img (

Answer 1

[Evgeny Erofeev]

Если на примере 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')(),
})

Answer 2

[littleguga]

В переменной html и будет отрендеренный html. Выводите его туда, куда нужно.

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