webpack如何打包图片

May 09 2018

初学webpack打包图片的时候，会遇到几种情况，需要注意。

首先在webpack中打包图片需要依赖于url-loader这个包资源，安装方法为

1	npm install url-loader

在webpack.config.js文件中的配置如下:

module: {
  rules: [
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: 'url-loader?limit=25000'
    }
  ]
}

test属性代表可匹配的图片类型，以|隔开。

use属性里的limit字段代表图片打包限制，这个限制不是说超过了大小就不能打包了，而是小于限制的时候，图片会自动转成base64码。像本例大小限制为25k，当图片大小小于25k时会自动转成base64码，当图片大小超过25k时自动修改文件名为一个随机哈希值。我们可以通过name字段来指定哈希值的位数，以及目录。修改一下上面的配置

module: {
  rules: [
    {
      test: /\.(png|jpg|jpeg|gif)$/,
      use: 'url-loader?limit=25000&name=dist/[hash:32].[name].[ext]'
    }
  ]
}

这个配置打包后的图片，目录存在于dist文件夹下，文件名为32位哈希值，扩展名不变。

有了这个配置之后，我们来看一下三种打包情况。

1. HTML文件中img标签的src属性引用或内嵌样式引用

1 2	<img src="background.jpg" /> <div style="background-image:url(background.jpg)"></div>

2. CSS文件中的背景图

1
2
3

#background {
  background: url(background.jpg);
}

3. JavaScript文件中动态添加或者改变图片引用

1	document.getElementById('background').style.backgroundImage = 'url(background.jpg)';

前面两种情况，url-loader能匹配到图片自动生成名称被哈希过的新图片。但是在javascript里，如果像上面那样写，url-loader就无法匹配到相关图片。不过可以通过使用模块化的方式来引用图片，

1 2	var imgPath = require('./background.jpg'); document.getElementById('background').style.backgroundImage = 'url(' + imgPath + ')';

通过模块化的方式来引用图片，url-loader就能匹配到相应的图片了。

以上就是我在学习使用webpack打包图片时，总结出的一些经验。