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

的样板

我可以在.png上显示mainComponents.vue图像，如果我直接将其放在./dist文件夹中，但是当我按原样放入资源路径时总是会失败，

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

Webpack dev img文件夹总是指向./dist

1 个答案: