Path created for background image is wrong in the template using webpack 5

Question

I am trying to build my template files using webpack 5. The issue is the path of the background image that is being generated is "basic-project/dist/stylesheet/img/webpack-bg.png", instead it should be "basic-project/dist/img/webpack-bg.png". Attached is the webpack.config.js file screenshot.

Answer 1

Looks like you have set up everything right. As you mentioned, the actual issue is from the output.publicPath value. Basically, the right one should be set as / in most cases:

// webpack.config.js
module.exports = {
  // ...
  output: {
    // ...
    publicPath: '/',
  },
}