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

Question

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?

Using `html-loader` looks right to me. But it's unclear on what source you are trying to apply it: it needs not to contain `src=require(...)` anymore, just `src=../../public/images/logo.png`. — andreypopp, Aug 14 '16 at 11:04

score 0 · Accepted Answer · answered Aug 16 '16 at 18:52

0

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.

answered Aug 16 '16 at 18:52

Tor Livar

1,193
1
9
9

score 0 · Answer 2 · answered Jan 03 '17 at 11:15

As @andreypopp says, you do not need the require() in the pug. But also, you do need to set the pug-loader exports option to false so that it exports the raw generated html rather than a js module. Here's my config:

  {
    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]
  },

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

2 Answers2