webpackwebpack-file-loaderwebpack-5webpack-loader

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


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.

enter image description here


Solution

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