本文簡(jiǎn)單說明兩種打包圖片的方法：JS中引入的圖片和HTML中引入的圖片添祸。
打包前準(zhǔn)備依賴包和配置文件
npm install url-loader --save-dev //安裝依賴包- 在
webpack.config.js中配置文件沧竟，如下圖：
配置url-loader
其中
limit=5000表示小于5000bytes的圖片將直接以base64的形式內(nèi)聯(lián)在代碼中望艺，可以減少一次http請(qǐng)求；name=pic/[name].[ext]表示大于5000bytes的圖片將存入輸出路徑的pic/文件夾命名格式不變。
- 文件夾包含關(guān)系如下：
文件夾.png
1.JS中引入的圖片打包
- 引入格式如下：
JS引入
運(yùn)行webpack后文件目錄如下：
運(yùn)行后輸出目錄中新增pic文件夾和名字為bundle的js文件
2.HTML中引入圖片打包
- 由于之前的入口函數(shù)
main文件夾中未引入html文件荐健，所以webpack不會(huì)解析html文件中的圖片路徑暖璧，所以要加載html文件案怯，需要下載依賴包：
npm install html-withimg-loader --save-dev
在webpack.config.js中配置文件，如下圖:
配置文件
- 在入口函數(shù)
main文件中引入html文件，這樣webpack就能夠解析html啦~
main文件如下：
main文件
注意：使用此引用方式時(shí)柿顶，html文件必須與
main文件在同一目錄下审胚。
- 進(jìn)行完以上兩步即可運(yùn)行webpack打包瞬捕，結(jié)果與方法1得到的結(jié)果相同搜囱。
