手把手教你webpack3(8)url-Loader配置简述-阿里云开发者社区

开发者社区> 零零水> 正文

手把手教你webpack3(8)url-Loader配置简述

简介:
+关注继续查看

URL-LOADER配置简述

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

DEMO地址

1、概述

简单来说,url-loader的效果类似file-loader

优点:

可以将css文件中的图片链接,转为base64字符串,或移动到打包后文件夹;

缺点:

可配置性比file-loader弱一些,但其实file-loader的那些配置,一般也用不到。

2、配置

2.1、limit

名称 类型 默认值 描述
limit {Number} undefined Byte limit to inline files as Data URL

使用url-loader的唯一目的,可以说就是为了这个,效果是将文件大小低于指定值的图片,转为base64字符串。

值表示小于这个大小的图片会被转码,单位是字节(1024 即 1KB)

配置:

{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000
            }
        }
    ]
}

css文件:

#app {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red;
    background: url('./logo.png') no-repeat;
    box-sizing: border-box;
}

#logo {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background: url('./logo.jpg') no-repeat;
    box-sizing: border-box;
}

webpack打包后效果:

url('./logo.jpg')

url('./logo.png')

变为

url(很长一个base64字符串)

注:

  1. 如果你想 .png 文件小于8kb转为base64字符串,但是 .jpg文件不管大小多少,都不转为base64字符串;
  2. 那么就需要用 file-loader 来搬运 .jpg 文件, url-loader 来搬运和转码 .png文件;
  3. 不能尝试两次调用 url-loader 来,用两个不同的配置来同时处理两种情况;
  4. 不过这个场景应该出现的极少。

2.2、mimetype

名称 类型 默认值 描述
mimetype {String} extname Specify MIME type for the file (Otherwise it's inferred from the file extension)

这个配置的意思呢,就是说,要不要把其他后缀名的图片文件,统一转为同一种格式的base64编码。

例如:

  1. 假如我有一个logo.png和一个logo.jpg图片;
  2. 那么png文件转码后的开头部分是:data:image/png;base64,
  3. 而jpg文件转码后的开头部分是:data:image/jpeg;base64,
  4. 如果配置这么写:mimetype: 'image/png'
  5. 那么开头部分将统一变为:data:image/png;base64,
  6. 另外,这个改变只是修改开头部分,但是实际大小是不影响的(当然,jpeg要比png多一个字符,实际测试结果,表示差别只有这一个字符而已);

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
想将算法进一步开发吗?手把手教你搭建基于CNN模型的Flask Web应用
想将算法进一步开发应用产品吗?本文手把手教你搭建基于CNN模型的Flask Web应用,算是抛砖引玉了。感兴趣的读者可以将自己的算法开发成其他类型的应用产品,说不定下一个人工智能创业公司Boss就是你哦!
4890 0
Debian Linux下安装配置 Pure-ftpd
PureFTPd 是一款专注于程序健壮和软件安全的免费FTP服务器软件(基于BSD License)。其可以在多种类Unix操作系统中编译运行,包括Linux、OpenBSD、FreeBSD、Solaris、Darwin等。
1982 0
webpack配置
webpack配置 配置 Webpack 的方式有两种: 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置; 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack --devtool source-map。
2353 0
手把手教你----MyEclipse中 配置 Tomcat
<div class="markdown_views"> <p></p> <div class="toc"> <ul> <li> <a href="#%E7%94%B5%E8%84%91%E4%B8%8A%E9%85%8D%E7%BD%AEtomcat%E6%9C%8D%E5%8A%A1%E5%99%A8">电脑上配置Tomcat服务器</a><ul> <li><a href=
1533 0
Samba的简介和配置
简介:本文只是讲一讲我们最常用的Linux与Windows共享文件,主要是为新手指一指路。如何建立最简单的Samba服务器,并讲述遇到问题应该从何处寻找解决方案;正在更新之中,希望您的参加 ... ... 谢谢; 目录       0、架设Samba 服务器的前提;             0.1 查看文件内容和编辑文件的工具;             0.2 关于文件和目录相关;
1547 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载