webpack打包图片问题

Question

问题描述

• 用webpack-dev-server调试程序, 使用img的src引用图片没有问题, 但是使用css的background-image这种方式引用图片, 会出现加载不出来的情况

• 代码:

css

background-image: url("../img/download/top.png");
background-size: 100% 100%;

webpack.config

{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}

DOM查看

发现在dist文件夹下就只有一个js文件, 没有图片文件, 请问这个怎么解决啊?

发现:当图片大于8k时会出现这种情况, 小于8k时, 没有问题

Answer 1

你这里设了小于8k会转换成dataurl的形式，你可以找找看dist目录（不是在浏览器里找，是在操作系统文件管理器里找），应该是能找到图片的。

之所以加载不出来，可能是你webpack配置中的publicPath有问题。

具体请参看这篇文章《webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？》

Answer 2

小于8k，图片以base64形式插入在css里，大于8k外链，不知道你的css loader是怎么配置的？