How to make webpack and jade(pug) friends?

Question

Pug

There is already an assembly on webpack, it was necessary to use some kind of template engine instead of html, so how do they work?
It says here, 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

How to get html-ku?
Or in this https://github.com/at0g/nunjucks-loader

Answer 1

Если на примере pug-loader, то вот так.
В webpack.config.js :
Не забываем про file-loader:
Картинки и прочее в .pug с таким pug-loader придется вставлять так:
Если шаблон вставляется в Angular, то придется подключать так:

@Component({
    selector: 'app-home',
    template: require('./home.component.pug')(),
})

Answer 2

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