How to change all href and src paths on webpack building?

Question

I have a websites, written mostly in pug (html preprocessor). I use output.publicPath equal to '/' so I can run webpack in development mode and work easily, treating project folder as a root one, but every href, src and url is an absolute path. I want to change every path by adding some nodes (let's use '/path/to/' for example) in the begging, when I build project. For example, I have an image

img(src="/img/image.jpg")

And after I build this project, I want to receive this:

<img src="/path/to/img/image.jpg">

And to receive the same with hrefs and urls.

I made a webpack build config and setted output.publicPath to '/path/to/' but it changed the pathes of linked css and js files:

mode: "production",
  output: {
  publicPath: "/HTMLPractice/dist/"
}

I'll be glad to receive any solution, idea or recommendation.

Answer 1

You can set publicPath on the file-loader, so long as the file-loader regex contains the image files.

In your webpack.config.js rules:

     {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'some/path',
        },
      },

More info: https://webpack.js.org/loaders/file-loader/#publicpath