webpack打包图片以及异常处理

2018年12月15日Web前端

看完了打包css,看下如何打包图片文件呢。 常用到图片的地方有元素背景图和img标签,先看下背景图片。

一、打包图片

打包图片时,需要用到url-loader,先使用npm安装下,

npm install url-loader --save-dev

在配置中增加以下规则,

test: /\.(jpg|png|gif|svg)$/,
exclude: /node_modules/,
use: [{
    loader:'url-loader'
}]

打包完成后,并没有生成对应的图片,在css文件中,见到了base64格式的图片,那也就是打包时,将图片打成了base64格式。其实有个limit参数可以控制多大的文件就不打包成base64,毕竟图片转成base64后,大小是比原来大的。修改loader,

loader: 'url-loader?limit=8192'

当图片小于8192字节时,就用base64,否则直接打包成图片,此时又需要用到另外一个loader,

npm install file-loader --save-dev

再次打包大文件时,就有对应的图片生成了。

二、img打包后图片丢失

背景图打包ok了,再来尝试用img标签引入图片,发现出问题了,图片丢失了,页面上也显示了加载图片失败的图标。

丢失的原因是,webpack无法识别这些路径,导致没有处理这些文件。所以我们使用require让webpack识别这些图片资源,修改src引用图片的写法:

<img src="${require('./public/image/111.png')}" />

当然,在有es6语法支持的情况下,我们可以借助模板字符串,

let img = require('./public/image/111.png');
let imgHtml = `<img src="${img}"/>`

这样也是可行的。