Webpack dev img folder always pointing to ./dist

Question

I am new to Webpack and Javascript frontend in General, so mostly I just use other's people boilerplate.

Below is my loader for png file I'm trying to load, it has 2 webpack config, this one is webpack.renderer.config.js:

    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: {
      loader: 'url-loader',
      query: {
        limit: 10000,
        name: 'imgs/[name].[ext]'
      }
    }
  },

and this one webpack.main.config.js (only notable code snippet):

  output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, 'app/dist')
  },

I'm utilizing Vue and Electron, by the way with boilerplate from GREG

I can show .png image on mainComponents.vue if I put it on ./dist folder directly, but always fail when I put in assets path as it should,

GET http://localhost:9080/assets/img/GeneralOutageFlow.png 404 (Not Found)

already tried using require and import but no success, here's my folder structure :

dist
src
|
|-main
|-renderer
  |
  |-assets
  |-components
     |-mainComponents
        |
        |-mainComponents.vue

How can I reference GeneralOutageFlow.png to /assets/img ? Thanks.

Answer 1

Try to set output.publicPath config to /assets/ .

Like:

output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, 'app/dist'),
    publicPath: '/assets/'
},