html引入css webpack_webpack基础 -- 处理html中引入的图片

使用: html-loaderoptions: {

attrs:[img:src]

}

webpack 配置rules:[

{

test:/\.(png|jpg|jpeg|gif)$/,

use:[

{

loader:'url-loader',

options:{

name:'[name]-[hash:5].[ext]',

limit: 1000,

outputPath:'assets/imgs/' // html和css中图片的输出路径

}

},

{

loader:'img-loader',

options:{

quality: 80

}

}

},

{

loader:'html-loader',

options:{

attrs:['img:src','img:data-src']

}

}

]

}

]

1、在html/ejs等中引用图片：

借助require和es6语法引入

这样不依赖loader也可以处理引入的图片

2. 在css/vue组件中引用图片：

照常按照相对路径引用css:

background: url(../../img/backpack/all.png);

vue组件：

3. 在js中引用图片：

需要借助require才能被webpack识别并打包图片资源let img = require('../../img/loveday/4.png');

let img_html = ``