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.

I can easily help you if you share a reproducible repo rather than just images? — tmhao2005, May 13 '21 at 04:31
Github Link: https://github.com/sachindra149/webpack5 Branch: dev-branch — Sachindra, May 13 '21 at 04:44
Is your issue using `index.hbs` template and can't resolve the image src inside that? — tmhao2005, May 13 '21 at 04:56
no the issue is I have defined styling in css file, src/stylesheet/index.scss. but when i generate the template using npm run start, the path generated is wrong. I hv updated the template file — Sachindra, May 13 '21 at 05:01
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/232324/discussion-between-tmhao2005-and-sachindra). — tmhao2005, May 13 '21 at 06:29

score 1 · Accepted Answer · answered May 13 '21 at 06:08

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: '/',
  },
}

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

1 Answers1