Как мне заставить webpack переписывать источники изображений из мопса?

Question

Я пишу приложение Angular 2 и хочу использовать мопс для своих шаблонов. Я использую webpack для создания решения.

Если я просто использовать

{ 
    test: /\.pug$/, 
    loader: 'pug-html-loader' 
}, 

в файле конфигурации WebPack, URL-адреса файлов изображения не переписаны. Поэтому я попытался изменить мопса к

img(src=require('../../public/images/logo.png')) 

но дает эту ошибку:

Module build failed: TypeError: require is not a function 

Таким образом, вместо этого я пытаюсь следующую конфигурацию WebPack:

{ 
    test: /\.pug$/, 
    loader: 'html?attrs=img:src!pug-html-loader' 
}, 

Но что дает эта ошибка:

ERROR in ./src/app/app.component.pug 
Module not found: Error: Cannot resolve 'file' or 'directory' ./\"../../public/images/logo.png\" in /<app-path>/src/app 
@ ./src/app/app.component.pug 1:213-263 

Каков правильный/лучший способ решения этой проблемы?

Answer 1

Оказалось, что я ударил this bug in the pug-html-loader пакет. Используя другую версию этого пакета, я заставил его работать.

Answer 2

Поскольку @andreypopp говорит, вам не нужен require() в мопсе. Но также вам нужно установить параметрpug-loader для false, чтобы он экспортировал необработанный HTML-код, а не модуль js. Вот моя конфигурация:

{ 
    test: /\.pug$/, 
    loaders: [ 
     // html loader gets webpack to process <img> src 
     'html-loader', 
     // requires pretty option otherwise some spacing between elements is lost 
     'pug-html-loader?{"pretty":true,"exports":false}' 
    ], 
    include: [sourcePath] 
    },