webpack打包图片以及异常处理

2018年12月15日Web前端0

看完了打包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}"/>`

这样也是可行的。

webpack

目录