How do I get webpack to rewrite image sources from a pug?

Question

I am writing an Angular 2 application and want to use a pug for my templates. I use webpack to create a solution.

If I just use

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

in the webpack configuration file, the image file URLs will not be rewritten. So I tried changing the pug to

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

but this gives this error:

Module build failed: TypeError: require is not a function

So, instead, I'm trying to do the following webpack configuration:

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

But this gives this error:

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

What is the right / best way to solve this problem?

Answer 1

Turns out I was pushing this error in the pug-html-loader package . Using a different version of this package, I made it work.

Answer 2

@andreypopp, require() . exports pug-loader exports, 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]
  },