一个简单的webpack图片打包输出问题，要疯了。

Question

为什么我的图片没有输出到dist目录呀。

// webpack.config.js
{
  test: /\.(png|jpg|gif)$/,
  loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}

// .css
.img1 {
  background: url('/img/img1.jpg');
}

// 打包输出
Hash: f9a3c4e85706690d0044
Version: webpack 1.14.0
Time: 7819ms
     Asset       Size  Chunks             Chunk Names
 bundle.js     743 kB       0  [emitted]  main
  main.css  135 bytes       0  [emitted]  main
index.html  329 bytes          [emitted]
Child html-webpack-plugin for "index.html":

我记得以前都会输出图片文件到dist目录的呀，难道我调了什么东西？百思不得其解。

Answer 1

似乎是我引用图片的方式错了。前面加点就正确了。

/* yes */
div {
    background: url(./m.jpg) no-repeat;
}

/* no */
div {
    background: url(/m.jpg) no-repeat;
}

Answer 2

图片大小是不是小于 8192 字节了？如果小于 8192 字节，则以 base64 的 data-url 方式打包到 js 或者 css 里了，这也就是这个加载器叫 （划掉）data-（划掉）url-loader 的原因。

如果还不行，试试改写成：

{
  test: /\.(png|jpg|gif)$/,
  loader: 'url-loader',
  query: {
    limit: 8192,
    name: '/img/[hash].[ext]'
  }
},