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 ~~~