6.webpack打包其他资源---打包图片资源 file-loader

1.例如我们在项目需要使用图片，比较常见的使用图片有两种：

• i mg元素，设置src属性；
• 其他全素（比如div),设置 background-image的css属性

要处理jpg、png等格式的图片，我们也需要有对应的loader: file-loader

file-loader

file-loader的作用就是帮助我们处理import/require() 方式引入一个文件资源，并且会将它放到我们输出的文件夹中

（1）先安装

npm install file-loader -D

(2)在webpack.config.js配置

//模块里面匹配对应的规则
module:{
rules:[
{
test:/\.(jpg|png )$/    //只要匹配到jpg, png结尾的字符串，
use:"file-loader"  //都使用file-loader 来进行处理
}]}