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中的参数。

首先看下面的例子:

[javascript] view plain copy

  1. module.exports = {
  2. // 入口文件路径,__dirname是根目录
  3. entry: __dirname + ‘/src/main.js‘,
  4. // 打包生成文件
  5. output: {
  6. path: __dirname + ‘/output‘,
  7. filename: ‘main.js‘
  8. },
  9. module: {
  10. rules: [
  11. {
  12. test: /\.css$/,
  13. use: [‘style-loader‘, ‘css-loader‘]
  14. },
  15. {
  16. test: /\.jpeg$/,
  17. use: [
  18. {
  19. loader: ‘url-loader‘,
  20. options: {
  21. limit: ‘1024‘
  22. }
  23. },
  24. ]
  25. }
  26. ]
  27. }
  28. }

其中,url-loader的配置中的options属性表示的就是url-loader的参数,还有一种等价的写法:

[javascript] view plain copy

  1. {
  2. test: /\.jpeg$/,
  3. use: ‘url-loader?limit=1024
  4. }

如果有多个参数,就用 ‘&’ 连接起来。和http请求中的参数类似。正如前面介绍的,limit这个参数就是告诉url-loader,在文件小于多少个字节时,将文件编码并返回DataURL。此外url-loader还有一些用于file-loader的参数。我们知道,file-loader的作用是将文件复制到其他目录。file-loader提供了一系列参数允许我们自定义诸如输出文件、文件名规则、发布路径等特性的参数。下面介绍一下这些参数。

3.url-loader的参数

先看下配置好的代码:

[javascript] view plain copy

  1. module.exports = {
  2. // 入口文件路径,__dirname是根目录
  3. entry: __dirname + ‘/src/main.js‘,
  4. // 打包生成文件
  5. output: {
  6. path: __dirname + ‘/output‘,
  7. filename: ‘main.js‘
  8. },
  9. module: {
  10. rules: [
  11. {
  12. test: /\.css$/,
  13. use: [‘style-loader‘, ‘css-loader‘]
  14. },
  15. {
  16. test: /\.jpeg$/,
  17. use: ‘url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/‘,
  18. }
  19. ]
  20. }
  21. }

这里涉及到了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

[plain] view plain copy

    1. npm install --save-dev url-loader
时间: 2024-10-21 09:07:01

vue file-loader vs url-loader的相关文章

QLPreviewController加载mainBundle文件不显示问题 Couldn't issue file extension for url:

需要把文件copy到沙盒中再显示 NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *docDir = [paths objectAtIndex:0]; NSString *path = [docDir stringByAppendingPathComponent:@"222.pdf"]; NSString *path2 =

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:http://yoursite.com/#/user/id. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模

vue+webpack+vue-cli获取URL地址参数

在没有使用webpack+vue router开发中,想要获取RUL传的参数地址,直接通过一个函数就可以获得. 比如在  www.test.com/test.html?sign=test  地址中,想要获取sign的值,通常的方法是用一个函数, var getUrlStr =  function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = wi

webpack教程

1 安装 webpack 2 初始化项目 3 webpack 配置 4 实时刷新 5 第三方库 6 模块化 7 打包.构建 安装 webpack# 我们通过 npm 在全局环境下安装 webpack: npm install webpack -g 安装完成后,我们可以使用 webpack 命令,执行 webpack --help 能够查看 webpack 提供的所有命令. 不过,建议在项目下安装一份局域的 webpack: npm install webpack --save-dev 如果觉得

webpack安装配置使用教程详解

webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对于不喜欢使用 jspm测试的朋友可以参考一下. webpack 入门 目录 1 安装 webpack2 初始化项目3 webpack 配置4 自动刷新5 第三方库6 模块化7 打包.构建8 webpack 模板我最近大量使用的是 jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又

webpack 基本配置 - 01

1 const webpack = require('webpack'); 2 const path = require('path'); 3 const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 const ExtractTextPlugin = require("extract-text-webpack-plugin"); 5 const CleanPlugin = require('clean-webpack-pl

配置webpack loader vue 报错:Module build failed: TypeError: this._init is not a function

单文件组件 引入时报错 配置webpage.config.js中的vue 需要如下写法 { test: /\.vue/, loader: "vue-loader", } 之前写的loader 是vue, 并没有加 -loader所以报错

vue项目使用webpack loader把px转换为rem

下载lib-flexible https://github.com/amfe/lib-flexible npm i lib-flexible --save 在main.js中引入lib-flexible import 'lib-flexible/flexible' 安装px2rem-loader https://github.com/songsiqi/px2rem 配置px2rem-loader 在build文件中找到util.js,添加px2rem-loader到cssLoaders中 con

Oracle Bigdata Connector实战1: 使用Oracle Loader加载HDFS文件到Oracle数据库

部署jdk/Hadoop/OraLoader软件包 将准备好的软件包,逐一解压到hadoop用户home目录下: hadoop-2.6.2.tar.gz jdk-8u65-linux-x64.gz oraloader-3.4.0.x86_64.zip Hadoop软件部署如下: ├── hadoop-2.6.2 ├── jdk1.8.0_65 ├── oraloader-3.4.0-h2 设置环境变量 export JAVA_HOME=/home/hadoop/jdk1.8.0_65 expor

Oracle Bigdata Connector实战2: 使用Oracle Loader for Hadoop加载Hive表到Oracle数据库

部署Hadoop/Hive/OraLoader软件 [[email protected] ~]$ tree -L 1 ├── hadoop-2.6.2 ├── hbase-1.1.2 ├── hive-1.1.1 ├── jdk1.8.0_65 ├── oraloader-3.4.0 配置hive metastore 我们采用MySQL作为hive的metastore,创建MySQL数据库 mysql> create database metastore DEFAULT CHARACTER SE