直接用一个例子说明
- 建立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
- 效果图