webpack 生成图片路径问题

Question

在使用webpack构建工具中遇到了 图片问题 下面是我的目录：

webpack.config.js的内容：

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    entry: "./js/components/header/header.js",
    output: {
        path: __dirname+'/js/components/header/',
        filename: "h.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.png$/, loader: "file-loader" }
        ]
    }
};

header.js的内容：

require('../../../css/basic.css');
require('./css/header.css');

我想问的是，webpack打包生成的图片在header.js所在的目录下，引用图片的路径也是当前目录下：

webpack打包的样式是内嵌在html上的，但我的html在最外层目录，就相当于让它在html目录下找图片，但是图片不在根目录而在header.js所在的目录下啊，所以引用不到。。蛋碎一地
我想问下的是：webpack有没有修改这个图片的路径？？？
或者有没有类似的参考资料？我研究研究

---

问题解决：
在loaders中配置：

{ test: /\.png$/, loader: "file-loader?name=img/[hash:8].[name].[ext]" }

就会在 img 文件夹中生成对应的图片，done ~ (@_@;)

Answer 1

孩纸，让老夫来告诉你，你缺了这个配置：ouput.publicPath,

看文档：output-publicpath

Answer 2

useRelativePath

  {
    loader: 'file-loader',
    options: {
      outputPath: 'img/',
      name: '[name].[ext]?[hash]',
      useRelativePath:true
    }
  }

Answer 3

写绝对路径 ？ （ / ）

Answer 4

{

            test: /\.(png|jpg|jpeg|gif)$/,
            loader: 'url-loader?limit=8192&name=[name].[ext]&outputPath=img/&publicPath=../'
        }
        

参数说明:
limit: 在文件小于多少个字节时，将文件编码并返回DataURL。
name: 表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。
outputPath: 表示输出文件路径前缀(此例中意为:在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面)。
publicPath: 表示打包文件中图片路径的前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了。

Answer 5

我打包出来的是个这样的图片，哪里出问题了吗

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader?name=img/[name].[ext]!url-loader?limit=8192'
},