javascript - Webpack dev img 文件夹始终指向 ./dist

Question

我对 Webpack 和 Javascript 前端总体来说是新手，所以大多数时候我只是使用其他人的样板。

下面是我尝试加载的 png 文件的加载器，它有 2 个 webpack 配置，这个是 webpack.renderer.config.js:

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

还有这个 webpack.main.config.js (只有值得注意的代码片段):

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

我正在使用 Vue 和 Electron，顺便使用来自 GREG 的样板

如果我直接将 ./dist 文件夹放在 ./dist 文件夹中，我可以在 mainComponents.vue 上显示 .png 图像，但当我这样做时总是失败按照应有的方式放入 Assets 路径，

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

已经尝试使用 require 和 import 但没有成功，这是我的文件夹结构:

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

如何将 GeneralOutageFlow.png 引用到 /assets/img ？谢谢。

Answer 1

尝试设置output.publicPath配置到/assets/。

喜欢:

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