webpack中的url-loader的使用

た入场券 2022-12-20 08:46 152阅读 0赞

**默认情况下 webpack 无法处理 css 文件中的 url() 地址， 不管是 图片 还是 字体库**  
下载： cnpm i url-loader file-loader -D  
如 处理此条路径  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]  
test 中匹配图片的类型，\[hash:8\]表示前面自动生成八位哈希的值，确保名称相同内容不相同的两张图片显示出来不一样（各自显示各自）；limit是给定的值，是指图片的大小 如果小于这个值 图片的名称就会被转换成base64字符串，否则不会转换成base64字符串；  
下面的ttf/woff/woff2 等字体 一个原理  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/cc42d992151448a8b6f5454221df463c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201111161248962.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw==,size_16,color_FFFFFF,t_70#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack4中sass的使用

1:安装 npm install sass-loader node-sass --save-dev 2:配置中加入 sass 重新编译就可以 {

r囧r小猫/ 2022年12月23日 14:25/ 0 赞/ 232 阅读

相关 webpack中的url-loader的使用

默认情况下 webpack 无法处理 css 文件中的 url() 地址，不管是图片还是字体库下载： cnpm i url-loader file-loader

た入场券/ 2022年12月20日 08:46/ 0 赞/ 153 阅读

相关 Webpack的使用

Webpack 的使用 -------------------- 安装webpack： cnpm install webpack -g cnpm

傷城~/ 2022年12月02日 15:06/ 0 赞/ 156 阅读

相关 WebPack 的简单使用

nrm 的安装： npm install -g nrm 全局安装，安装成功界面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shad

柔光的暖阳◎/ 2022年04月23日 11:04/ 0 赞/ 201 阅读

相关 webpack中webpack.config.js的使用

文章目录 webpack.config.js的作用：示例源码运行结果分析 webpack.config.j

朴灿烈づ我的快乐病毒、/ 2022年04月18日 05:43/ 0 赞/ 604 阅读

相关 vue中Webpack的使用-思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpZG9u

电玩女神/ 2022年01月11日 18:59/ 0 赞/ 233 阅读

相关 vue中Webpack的使用

在网页中会引用哪些常见的静态资源？ JS .js .jsx .coffee .ts（TypeScript 类 C\ 语言） CSS .css

水深无声/ 2022年01月11日 11:19/ 0 赞/ 323 阅读

相关 webpack_（第二章）_使用webpack的配置文件

webpack的配置文件 webpack是一个模块打包工具，帮助我们把模块都打包到一起，当引入图片模块和JS模块，引入的流程和打包的方式肯定是不同的。加入引用的是JS文件，

妖狐艹你老母/ 2022年01月09日 16:21/ 0 赞/ 256 阅读

相关 Webpack的使用

一、了解Webpack 　　1、什么是webpack 　　　　Webpack是一个模块打包器(bundler) 　　　　在Webpack看来，前端的所有资源文件

亦凉/ 2021年12月03日 11:27/ 0 赞/ 372 阅读

相关【webpack】中resolveLoader的使用方法

loader引入的几种方式第一是通过npm包安装的loader可以这样写 module: { rules: [ {

爱被打了一巴掌/ 2021年10月26日 13:31/ 0 赞/ 356 阅读