Search code examples
webpackpug-loader

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

I am writing an Angular 2 application and want to use pug for my templates. I am using webpack to build the solution.

If I just use 

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

in the webpack config file, the URLs of the image files are not rewritten. So I tried to change the pug to 

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

but that gives this error:

Module build failed: TypeError: require is not a function

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

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

But that 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 correct/best way of solving this issue?

Solution

  • Turns out I was hitting this bug in the pug-html-loader package. By using a different version of this package, I made it work.