默认情况下,webpack无法处理css文件中的url地址,不管是图片还是字体库,只要是URL地址,都处理不了,需要第三方loader

1.安装loader

cnpm i url-loader file-loader -D   //file-loader是url-loader的内部依赖,在配置文件中不必配置file-loader

2.配置文件webpack.config.js新建第三方的匹配规则

module:{//配置所有第三方loader模块的
rules:[//第三方模块的匹配规则
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7632&name=[hash:8]-[name].[ext]'},//处理图片路径的loader
//limit给定的值,是图片的大小,单位是byte,如果我们音乐的图片,大于或等于给定的limit值,
则不会被转为base64格式的字符串,如果图片小于给定的limit值,则会被转为base64的字符串
//name=[name].[ext]:name属性指向原来的名称,例test.jpg
//[hash:8]:取前8位hash值
]
}

14 webpack中url-loader的使用的更多相关文章

  1. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  2. 第五十一篇:webpack中的loader(二) --less-loader

    好家伙 先扩充一下知识点: 什么是.less文件? 作为一名前端开发的同学,很多时候我们都无法避免地要去写大量的 CSS 代码, 而且耗费的时间还不少,所以学习一种能够提升开发效率的 CSS 预处理器 ...

  3. 第五十篇: webpack中的loader(一) --css-loader

    好家伙, 1.webpack配置中devServer节点的常用配置项 devServer:{ //首次打包完成后,自动打开浏览器 open:ture, //在http协议中,如果端口号是80,则可以被 ...

  4. Vue系列之 => webpack的url loader

    安装: npm i url-loader file-loader -D  //url-loader内部依赖file-loader webpack.config.js const path = requ ...

  5. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  6. webpack 中,loader、plugin 的区别

    loader 和 plugin 的主要区别: loader 用于加载某些资源文件. 因为 webpack 只能理解 JavaScript 和 JSON 文件,对于其他资源例如 css,图片,或者其他的 ...

  7. Webpack 2 视频教程 014 - 深入理解 Webpack 2 中的 loader

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  8. 如何在webpack中成功引用到图片?

    打包图片时,你可曾遇到在产出目录文件夹找不到图片,即便找到了,但是页面说引用不到资源?页面上或者文件中引用的图片地址不对? 一.在webpack中引入图片需要url-loader //webpack配 ...

  9. 在webpack中使用postcss之插件包precss

    precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package ...

随机推荐

  1. Keras.NET

    [翻译]Keras.NET简介 - 高级神经网络API in C#   Keras.NET是一个高级神经网络API,它使用C#编写,并带有Python绑定,可以在Tensorflow.CNTK或The ...

  2. 【Linux】Shell批量修改文件名

    修改文件名,替换中间字符: 例如:ABC_define_EFG.jpg,要把中间的define替换成argument: 用如下脚本即可: for var in *; do mv "$var& ...

  3. Spring Cloud Alibaba学习笔记(13) - Spring Cloud Stream的监控与异常处理

    Spring Cloud Stream监控 Spring Boot Actuator组件用于暴露监控端点,很多监控工具都需要依赖该组件的监控端点实现监控.而项目集成了Stream及Actuator后也 ...

  4. DropDownList下拉控件

    <asp:DropDownList    ID="DropDownList1" runat="server" Width="177px" ...

  5. eclipse 部署Tomcat 只有web-inf webapps没有项目文件

    只有webapps 修改eclipse 默认的 发布位置改为 tomcat的安装位置 eclipse 默认的web-content 改为webroot ,发布后web-inf目录下才会有webroot ...

  6. English-培训6-Do you like rap?

  7. visualSVN server 安装成功,但是无法连接,url打不开

    转自:https://www.oschina.net/question/878142_91825 点击开始–>程序->VisualSVN–>VisuaSVN Server Manag ...

  8. C++ 虚表虚函数怎么就实现了多态?

    虚表vftable,编译器为每个拥有虚函数的类都建有一张虚函数表,里面存有虚函数的入口指针(地址).在类对象的内存布局中,先是一个vfptr虚表指针,指向虚表首地址,而后通过偏移量的形式来访问虚表中的 ...

  9. 【前端开发】ES6知识点系统化梳理笔记

    >ES6扩展: #Map和Set是es6标准新增的数据类型 ##Map是key-value(关键字-值),Map允许修改value,不允许修改key,Map支持下标操作 var m = new ...

  10. [LeetCode] 76. 最小覆盖子串 ☆☆☆☆☆(滑动窗口)

    https://leetcode-cn.com/problems/minimum-window-substring/solution/hua-dong-chuang-kou-suan-fa-tong- ...