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

的样板文件

我可以在 mainComponents.vue 上显示 .png 图像，如果我将它直接放在 ./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

Webpack dev img folder always pointing to ./dist

javascript

webpack

vue.js

webpack-dev-server

webpack-2