在前端開發(fā)中读恃，一般會(huì)有三種方式來引用圖片社裆，我們假設(shè)在src目錄下img文件夾下有一個(gè)logo.jpg的圖片
一種是在css中當(dāng)作背景圖引入：
style.css(根目錄下危尿，項(xiàng)目結(jié)構(gòu)看第二篇)
body{
background: url('./img/logo.jpg')
}
另一種是在js中通過創(chuàng)建Image標(biāo)簽再引入：
index.js
import logo from './img/logo.jpg'
let img = new Image()
img.src = logo
第三種方式是在html標(biāo)簽中引入抬旺。
<img src="./img/logo.jpg" alt="">
如果不進(jìn)行任何處理崭倘，在打包的時(shí)候這些圖片文件是不會(huì)被打包的问芬，以至于打包出來的圖片找不到悦析，下面看下該怎么處理。
前兩種方式用url-loader來處理此衅，它會(huì)在內(nèi)部生成一張圖片强戴，并返回圖片文件名。（file-loader 和 url-loader 都可以解決這個(gè)問題挡鞍。 但是url-loader會(huì)將引入的圖片進(jìn)行編碼骑歹， 我們引用的時(shí)候只需要引入這個(gè)文件就可以訪問圖片了， 可以大大減少 HTTP請(qǐng)求的次數(shù)墨微。）
安裝：
npm install url-loader file-loader
在webpack.config.js里做一下配置：
module: {
rules: [
...
test: /\.(png|jpe?g|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//圖片大小小于等于limit值道媚，則會(huì)以base64形式加載，不會(huì)發(fā)請(qǐng)求翘县，大于這個(gè)值則用file-loader加載
limit: 200*1024,
esModule:false,
name: '[hash:10].[ext]', //[ext]表示取原來文件的擴(kuò)展名
},
},
],
...
],
},
第三種需要用html-loader來處理最域，還是先安裝，然后配置锈麸。
npm install html-loader
module: {
rules: [
...
{
test: /\.html$/,
loader: 'html-loader',
},
...
],
},
圖片處理就寫到這啦
