码迷,mamicode.com
首页 > Web开发 > 详细

weback中loader的使用-图片文件

时间:2019-10-02 16:30:42      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:cnpm   round   too   bpa   扩展名   扩展   webp   element   font   

1.在终端执行
cnpm i url-loader -D  //安装url-loader解决url报错
cnpm i file-loader -D   //内部依赖,不用在配置文件中配置
2.配置webpack.config.js
module:{
    rules:[
        { test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
        use: [{
        loader:url-loader,
        options:{
            limit:8192,//限制打包图片的大小:
            //如果大于或等于8192Byte,则按照相应的文件名和路径打包图片;如果小于8192Byte,则将图片转成base64格式的字符串。
            name:images/[name]-[hash:8].[ext],//images:图片打包的文件夹;
            //[name].[ext]:设定图片按照本来的文件名和扩展名打包,不用进行额外编码
            //[hash:8]:一个项目中如果两个文件夹中的图片重名,打包图片就会被覆盖,加上hash值的前八位作为图片名,可以避免重名。
        }
        }]}
    ]
}

 

3.图片引用的方式

1.css中的背景图片

background-image:url(./images/img.jpg)

2.html<img>标签

 
<img src="./imges/img.jpg">

 

3.js中的路径赋值

const img=getElementByTagName(img)[0];
img.src="./imges/img.jpg"

 

weback中loader的使用-图片文件

标签:cnpm   round   too   bpa   扩展名   扩展   webp   element   font   

原文地址:https://www.cnblogs.com/supredreamer/p/11617421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!