webpack3 URL-LOADER配置教程
url-loader配置简述
文档全文请查看 根目录的文档说明。
如果可以,请给本项目加【star】和【fork】持续关注。
有疑义请点击这里,发【issues】。
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字符串)
注:
如果你想 .png 文件小于8kb转为base64字符串,但是 .jpg文件不管大小多少,都不转为base64字符串; 那么就需要用 file-loader 来搬运 .jpg 文件, url-loader 来搬运和转码 .png文件; 不能尝试两次调用 url-loader 来,用两个不同的配置来同时处理两种情况; 不过这个场景应该出现的极少。
2.2、mimetype
名称 | 类型 | 默认值 | 描述 |
mimetype | {string} | extname | specify mime type for the file (otherwise it’s inferred from the file extension) |
这个配置的意思呢,就是说,要不要把其他后缀名的图片文件,统一转为同一种格式的base64编码。
例如:
假如我有一个logo.png和一个logo.jpg图片; 那么png文件转码后的开头部分是:data:image/png;base64,; 而jpg文件转码后的开头部分是:data:image/jpeg;base64,; 如果配置这么写:mimetype: 'image/png'; 那么开头部分将统一变为:data:image/png;base64,; 另外,这个改变只是修改开头部分,但是实际大小是不影响的(当然,jpeg要比png多一个字符,实际测试结果,表示差别只有这一个字符而已);
推荐阅读
-
关于session在PHP5的配置文件中的详细设置参数说明_PHP教程
-
php Thinkphp 3.1配置文件相应总结_PHP教程
-
phpmyadmin配置文件现在需要一个短语密码_PHP教程
-
asp.net core实例教程之配置
-
win10环境PHP 7 安装配置【教程】,win10安装配置
-
win10 DVWA下载安装配置图文教程详解(新手学渗透)
-
PHP读取PDF内容(LINUX下XPDF的配置和使用)_PHP教程
-
PHP运行环境配置与开发环境的配置(图文教程)
-
Win7配置FTP服务_PHP教程
-
php+phpStorm+xdebug配置方法,phpstormxdebug_PHP教程