手把手教你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多一个字符,实际测试结果,表示差别只有这一个字符而已);
目录
相关文章
|
10月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
10月前
|
缓存 前端开发 JavaScript
Webpack与Babel的进阶配置与优化
通过以上的进阶配置和优化策略,可以更好地发挥`Webpack`与`Babel`的功能,提高项目的性能和开发效率。
|
10月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
302 5
|
10月前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
182 2
|
11月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
370 58
|
11月前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
317 58
|
11月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
239 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
10月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
155 3
|
10月前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
247 6
|
10月前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
264 7