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

【问题标题】：Webpack dev img folder always pointing to ./distWebpack dev img 文件夹总是指向 ./dist
【发布时间】：2017-12-04 09:12:12
【问题描述】：

我一般是 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（只有值得注意的代码sn-p）：

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

我正在使用 Vue 和 Electron，顺便提一下 GREG 的样板文件

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

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 ？谢谢。

【问题讨论】：

标签： javascript webpack vue.js webpack-dev-server webpack-2

【解决方案1】：

尝试将output.publicPath 配置设置为/assets/。

喜欢：

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

【讨论】：

我花了一段时间来调整和弄清楚，但谢谢！
顺便说一句，答案是publicPath: path.join(__dirname, 'app/src/assets')..