vue file-loader vs url-loader
1.前言
如果我们希望在页面引入图片(包括img的src和background的url)。当我们基于webpack进行开发时,引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
另外,如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢?简答地说,url-loader封装了file-loader。url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。通过上面的介绍,我们可以看到,url-loader工作分两种情况:1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
推荐文档:
file-loader: https://github.com/webpack-contrib/file-loader
url-loader: http://www.cnblogs.com/ghost-xyx/p/5812902.html
2.loader中的参数
上面提到url-loader的参数和file-loader的参数,那么loader的参数是个什么概念呢?loader的参数用来自定义loader处理文件时的工作特性。下面以url-loader为例,介绍一下webpack的loader中的参数。
首先看下面的例子:
- module.exports = {
- // 入口文件路径,__dirname是根目录
- entry: __dirname + '/src/main.js',
- // 打包生成文件
- output: {
- path: __dirname + '/output',
- filename: 'main.js'
- },
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.jpeg$/,
- use: [
- {
- loader: 'url-loader',
- options: {
- limit: '1024'
- }
- },
- ]
- }
- ]
- }
- }
其中,url-loader的配置中的options属性表示的就是url-loader的参数,还有一种等价的写法:
- {
- test: /\.jpeg$/,
- use: 'url-loader?limit=1024
- }
如果有多个参数,就用 ‘&’ 连接起来。和http请求中的参数类似。正如前面介绍的,limit这个参数就是告诉url-loader,在文件小于多少个字节时,将文件编码并返回DataURL。此外url-loader还有一些用于file-loader的参数。我们知道,file-loader的作用是将文件复制到其他目录。file-loader提供了一系列参数允许我们自定义诸如输出文件、文件名规则、发布路径等特性的参数。下面介绍一下这些参数。
3.url-loader的参数
先看下配置好的代码:
- module.exports = {
- // 入口文件路径,__dirname是根目录
- entry: __dirname + '/src/main.js',
- // 打包生成文件
- output: {
- path: __dirname + '/output',
- filename: 'main.js'
- },
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.jpeg$/,
- use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
- }
- ]
- }
- }
这里涉及到了4个参数:limit、name、outputPath、publicPath。其中limit已经说明过。file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数
name表示输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希。加上[path]表示输出文件的相对路径与当前文件相对路径相同,加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后,打包后文件中引用文件的路径也会加上这个相对路径。
outputPath表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/,图片被打包时,就会在输出文件夹下新建(如果没有)一个名为img的文件夹,把图片放到里面。
publicPath表示打包文件中引用文件的路径前缀,如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了。
4.安装url-loader
- npm install --save-dev url-loader
vue file-loader vs url-loader的更多相关文章
- vue获得当前页面URL动态拼接URL复制邀请链接方法
vue获得当前页面URL动态拼接URL复制邀请链接方法 当前页面完整url可以用 location.href路由路径可以用 this.$route.path路由路径参数 this.$route.par ...
- Laravel+vue实现history模式URL可行方案
项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. h ...
- Vue系列之 => webpack的url loader
安装: npm i url-loader file-loader -D //url-loader内部依赖file-loader webpack.config.js const path = requ ...
- vue+webpack+vue-cli获取URL地址参数
在没有使用webpack+vue router开发中,想要获取RUL传的参数地址,直接通过一个函数就可以获得. 比如在 www.test.com/test.html?sign=test 地址中,想 ...
- JAVA SpringMVC + FormDate + Vue + file表单 ( 实现 js 单文件和多文件上传 )
JS 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- 04.vue获取微博授权URL
1.在Vue页面加载时动态发送请求获取微博授 权url 1.1 在 components\common\lab_header.vue 中写oauth动态获取微 博授权**URL // 获取微博登录地址 ...
- vue获取微博授权URL
1.在Vue**页面加载时动态发送请求获取微博授权url 1.1 在 components\common\lab_header.vue 中写oauth动态获取微 博授权URL // 获取微博登录地址 ...
- vue动态绑定background:url绑不上的问题
场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...
- Nodejs file path to url path
import * as path from 'path'; import * as url from 'url'; const savePath = path.join('public', 'imag ...
- vue获取路由地址栏url里面的指定参数
this.$route.query.gid //gid是获取指定参数的名字
随机推荐
- 网页效果分析 VCD分解
VCD分解分为三部分: 1. view 视觉 HTML + CSS 基本界面模板 2. controller 控制 javascript 内 ...
- 数据库学习笔记 (三) python操作数据库
python 操作MYSQL数据库主要有两种方式: 使用原生模块:pymysql ORM框架:SQLAchemy 一.pymysql 1.1下载安装模块 第一种:cmd下:执行命令下载安装:pip3 ...
- PHP类(四)-类的继承
类的继承就是从已经定义的类中继承数据,也可以重新定义或者加入一些数据. 被继承的类称为父类,基类,超类 继承的类称为子类,派生类 在PHP中只能使用单继承,也就是一个类只能从一个类中继承数据,但是一个 ...
- PDM生成数据库-0设置表名和字段名中不带双引号
如果PDM直接导出脚本的话,所有的表和字段都会被加上双引号,非常不方便,去除双引号的办法: Database->Edit Current DBMS在弹出窗体中第一项General中找到 Scri ...
- 2015.1.4 判断鼠标点击DataGridView的第几行还是空白处
public int GetRowIndexAt(int mouseLocation_Y) { if (dvaw.FirstDisplayedScrollingRowIndex < 0) { r ...
- java 多线程系列---JUC原子类(一)之框架
根据修改的数据类型,可以将JUC包中的原子操作类可以分为4类. 1. 基本类型: AtomicInteger, AtomicLong, AtomicBoolean ;2. 数组类型: AtomicIn ...
- loop
-- ------------------------loop---------------------------delimiter $DROP PROCEDURE IF EXISTS my_cou ...
- day17 10.jdbc的crud操作
每次都是注册驱动,获取连接,然后执行.每次都写很累,肯定能抽取出来一些东西.Java里面是这样的,相同的东西可以抽取做成一个方法.用的时候调这方法就OK了.这方法抽取到什么程度呢? package c ...
- ROS探索总结(二)——ROS总体框架
个人分类: ROS 所属专栏: ROS探索总结 一. 总体结构 根据ROS系统代码的维护者和分布来标示,主要有两大部分: (1)main:核心部分,主要由Willow G ...
- 什么是FastCGI, PHP-FPM
CGI,FastCGI都是一套接口标准:是编程语言(比如php,python; python里面也有wsgi)与web服务器(比如Nginx)的通信标准(比如你跟老外交流,那么FastCGI就相当于是 ...