webpack Image loader 加載圖片 · web前端

直接用一個例子說明 1. 新建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); ~~~ 2. 建立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> ~~~ 3. 建立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的形式引入圖片，大于就用圖片地址引用,Data URL好像不會緩存 4. 打開命令行，用cnpm 安裝url-loader包 ~~~ cnpm install url-loader --save-dev ~~~ 還有file-loader ~~~ cnpm install file-loader --save-dev ~~~ 5. 用webpack命令進行打包 ~~~ webpack ~~~