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 来进行处理
}]}


版权声明:本文为weixin_51614564原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。