webpack加载器打包样式表中的图片和字体

最新推荐文章于 2022-08-13 18:28:33 发布

向前有光

最新推荐文章于 2022-08-13 18:28:33 发布

阅读量272

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_40666120/article/details/106157591

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言
index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/button.js"></script>
</head>
<body>
    <div id="box"></div>
</body>
</html>

at.css代码

#box{
    width:580px;
    height:340px;
    background-color: pink;
    background-image: url('../images/ins.jpg');
}

运行打包命令，在浏览器查看结果
在这里插入图片描述
这儿就出现了报错，需要一个合适的loader来处理图片文件(这就是说webpack默认处理不了样式表中的图片路径)这里我们就需要安装第三方loader来解决这个问题。

打包样式表中的图片和字体文件

运行 npm i url-loader file-loader -D命令

在 webpack. config.js的module -> rules数组中，添加loader 规则如下:

//所有第三方文件模块的匹配规则
    module:{
       rules:[
            //配置图片和字体
           {
               test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
               use: 'url-loader?limit=16940'
            }
       ]    
    }

其中?之后的是loader的参数项。
limit用来指定图片的大小，单位是字节(byte) ,只有小于limit 大小的图片,才会被转为base64 图片

执行vscode终端 npm run start 命令查看效果

在这里插入图片描述
这里可以看出来图片已经显示和被转成base64了

向前有光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack加载器打包样式表中的图片和字体

前言index.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/button.
复制链接

扫一扫

专栏目录