webpack 學習（4）--- 使用webpack Image loader 載入圖片
阿新 • • 發佈：2019-02-13
直接用一個例子說明
- 建立index.html檔案，引入bundle.js
<!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>
- 新建main.js檔案， 建立img標籤後，把src的值用require引進來。然後插入標籤。
var img1 = document.createElement("img");
img1.src = require("./small.png");
document.body.appendChild(img1);
var img2 = document.createElement("img");
img2.src = require("./big.png");
document.body.appendChild(img2);
- 建立webpack.config.js配置檔案
module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' }, ] } };
這裡需要說明的是limit ，它的左右是如果圖片的大小，小於8192bytes就以Data URL的形式引入圖片，大於就用圖片地址引用。
- 開啟命令列，用cnpm 安裝url-loader包。
cnpm install url-loader --save-dev
- 使用webpack命令進行打包，生成'bundle.js'檔案。
- 安裝live-server，只要用npm install就可以安裝了
npm install live-server -g
- 啟動live-server預覽
live-server
- 效果圖