Webpack——使用webpack Image loader 加载图片

1、新建main.js文件， 创建img标签后，把src的值用require引进来。然后插入标签。

1 2 3 4 5 6 7

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

lang="en">            charset="UTF-8">     name="viewport" content="width=device-width, initial-scale=1">

3、建立webpack.config.js配置文件

1 2 3 4 5 6 7 8 9 10 11

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