如何使用webpack 打包图片

最近在学习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/