0

I have a pug mixin. Mixin is using to create block with whatever image name passed as argument.

mixin img({imageSrc: ""} = {})
  .img(src="./img/" + imageSrc + ".jpg")

As a result I want webpack either place this image in dist/img/ or processed and replaced this path with it's base64 format.

Due to my need to save relative paths in sass and pug I use url-loader. So my current configuration for pug and image looks like this:

module: {
  rules: [{
    test: /\.pug$/,
    loader: 'pug-loader
  }, {
    test: /\.(jp(e*)g|png|svg)$/,
    use: [{
      loader: "url-loader",
      options: {
        outputPath: "images/"
      }
    }]
  }]
}

Appreciate your help because I'm running out of ideas :c

Graham
  • 7,431
  • 18
  • 59
  • 84
SpekalsG3
  • 155
  • 1
  • 8

1 Answers1

0

I don't think url-loader has an outputPath option, it just outputs to your Webpack config's output.path. Assuming that your output.path is dist (default) you can have files go to dist/img by specifying the name option like: 

options: {
  name: 'img/[name].[ext]?[hash]'
}
Ian Walter
  • 882
  • 2
  • 8
  • 23