Webpack——使用webpack Image loader 載入圖片
阿新 • • 發佈：2019-01-29
1、新建main.js檔案， 建立img標籤後，把src的值用require引進來。然後插入標籤。
| 1234567 | varimg1=document.createElement("img");img1.src=require("./small.png");document.body.appendChild(img1);varimg2=document.createElement("img");img2.src=require("./big.png");document.body.appendChild(img2); |
2、建立index.html檔案，引入bundle.js
| 123456789101112131415 | <!DOCTYPE html><html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1"></head><body> <script type="text/javascript"src="bundle.js"></script></body></html> |
3、建立webpack.config.js配置檔案
| 1234567891011 | module.exports={entry:'./main.js',output:{filename:'bundle.js'},module:{loaders:[{test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'},]}}; |
這裡需要說明的是limit ，它的左右是如果圖片的大小，小於8192bytes就以Data URL的形式引入圖片，大於就用圖片地址引用。
4、開啟命令列，用cnpm 安裝url-loader包。
| 1 | $cnpm install url-loader--save-dev |
5、用webpack命令進行打包
| 1 | $webpack |