手把手教你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多一个字符,实际测试结果,表示差别只有这一个字符而已);
目录
相关文章
|
2月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
179 0
|
2月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
157 0
|
10天前
|
JSON 前端开发 JavaScript
前端工程化:Webpack配置全攻略
【7月更文挑战第14天】
23 6
|
9天前
|
JSON 缓存 前端开发
前端工程化:Webpack配置全攻略
【7月更文挑战第18天】
18 1
|
1月前
|
缓存 JavaScript
webpack配置中的3种hash值
webpack配置中的3种hash值
|
1月前
|
缓存 前端开发 JavaScript
Webpack作为模块打包器,为前端项目提供了高度灵活和可配置的构建流程
【6月更文挑战第12天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。这些方法能提升构建速度,提高开发效率。
42 3
|
24天前
|
JavaScript
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
vue 配置【详解】 vue.config.js ( 含 webpack 配置 )
22 0
|
1月前
|
Windows
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
iis配置http重定向302转发get请求并去掉最后的斜杠/ iis重定向 iis去除url最后的斜杠 iis重定向链接斜杠(已解决)
30 0
|
2月前
|
前端开发
【专栏】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
2月前
|
缓存 JavaScript 前端开发
webpack学习笔记--基本配置
webpack学习笔记--基本配置