最近在学习vue,需要用到webpack打包css,在webpack中文网https://www.webpackjs.com/里只有css的打包配置，
在编写css样式时，因为要引入 背景图片，打包时webpack就会报错，css样式如下：
使用webpack打包时报的错误如下图：
开始以为是自己的图片路径写错了，又仔细的阅读了下webpack的loader ，才知道是图片的url路没有配置，那么loader到底是什么呢？
webpack中文网上的解释如下：
看完之后，
，还是不懂。。。。。。。。
不得已，只好去webpack官网找答案了，http://webpack.github.io/docs/usage.html，凭借着我不屈不挠的精神，终于在官网里找到一一句“有很多不同的装载器，你可以用来包括文件在你的应用程序包，包括CSS和图像加载器”，简直是我的救命草啊，点击“装载器”
进入到装载器列表页，找到打包，如下：
原来在 webpack 中引入图片需要依赖 url-loader 这个加载器。既然找到原因了，那么问题就好办了，只要引入就行来：
1、安装URL-loader 加载器
npm install url-loader --save-dev
2、配置webpack的config.js 文件
module: { loaders: [ { test: /.css$/, loader: 'style-loader!css-loader' }, { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/, loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'}, { test: /.png$/, loader: "file-loader?name=images/[hash:8].[name].[ext]" } ], }
test 属性代表可以匹配的图片类型，除了 png、jpg 之外也可以添加 gif 等，以竖线隔开即开。
loader 后面 limit 字段代表图片打包限制，这个限制并不是说超过了就不能打包，而是指当图片大小小于限制时会自动转成 base64 码引用。上例中大于8192字节的图片正常打包，小于8192字节的图片以 base64 的方式引用。
url-loader 后面除了 limit 字段，还可以通过 name 字段来指定图片打包的目录与文件名
3、输入打包命令，运行结果如下：
4、打包前我的项目目录如下：
5、打包后images里生成了一个打包后的图片：
参考文档：webpack中文网http://webpackdoc.com/loader.html
webpack 官网http://webpack.github.io/docs/