webpack解析圖片（四）

webpack解析圖片

如果我們直接引入的圖片是網上鍊接對應的圖片，那麼是可以不用圖片解析器的。

如果是在圖片放在本項目的路徑內引入就需要用的圖片解析器。常用的圖片解析器有file-loader和url-loader

當我們引入本地圖片，而沒有用對應loader時會看到如下報錯

url-loader是把圖片轉爲base64字節的文件，在options裏可以設置最大圖片大小。如果超過這個值，就會和file-loader行爲一樣，打包後會生成單獨的圖片文件放在dist目錄。

這篇我們就以url-loader爲例

安裝url-loader

npm install url-loader --save-dev

本地安裝file-loader

在webpackconfig中配置url-loader

在module的rules中添加如下代碼

{ test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'url-loader',
},

（完整代碼可以到github上查看，文章底部有地址鏈接）

運行打包命令

npm start

打開引入打包後js的html文件，可以看到圖片是以base64模式顯示的。

在代碼中引用

如圖引入圖片相對位置即可

如果我們用file-loader來進行打包，

安裝file-loader

npm install file-loader --save-dev

在webpackconfig中配置file-loader

{ test: /\.(png|jpe?g|gif|svg)$/,
  loader: 'file-loader',
  options: {
  	publicPath:"../dist"
  }
},

其中publicPath爲打包後在html中插入圖片的位置相對路徑。

打包

npm start

打包後可以看到dist目錄裏多了一個圖片

代碼裏引用

因爲我們沒有用生成html的loader，所以如果我們直接像url-loader裏那般引用的話，在瀏覽器裏打開html這個圖片src會是一個object對象。

我們可以換一種方式來引入

運行html可以看到圖片是以地址的形式引入的。

這是兩種圖片的loader，一般直接用url-loader就可以滿足了。

代碼示例https://github.com/ccDbb/webpack-test中history的v4版本中。