手把手教你webpack3(9)File-Loader配置简述

简介:

FILE-LOADER配置简述

前注:

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

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

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

DEMO地址

1、概述

简单来说,file-loader 就是将文件(由于一般是图片文件为主,所以下面通常使用图片两字作为替代,方便理解。其他的包括字体文件等),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中。

处理的内容包括:

  1. 文件名的处理,比如加 [hash]
  2. 路径的处理,比如【把图片文件统一放到img文件夹中】;

优点:

相较于 url-loader 可以将图片转为base64字符串,file-loader 在功能上更加强大一些;

缺点:

实际开发中,将一定大小以下的图片转为 base64字符串,有利于加载速度的提升。

2、配置

2.1、name

名称 类型 默认值 描述
name {String|Function} [hash].[ext] 为你的文件配置自定义文件名模板

简单的来说,这个就是规定,如何命名打包后的文件夹的文件名的。

默认值表示:命名是 哈希值 + 扩展名 的形式。

常见命名方式是:img/[hash].[ext],即将所有的图片(准确的说,是被file-loader处理的文件),都打包到 img 文件夹下。

几点:

  1. [hash:6]可以控制 hash 值的长度,6 表示长度为6,默认是 32;
  2. [ext] 表示是原文件的扩展名,应该没人会想改这个吧?
  3. [path] 不好用一句话概括。举个例子,图片在 /src/logo.png,打包后文件夹是 dist,配置为 '[path][name].[ext]',那么图片最终为:/dist/src/logo.png。实际上是相对于context的路径,context默认是webpack.config.js 的路径;
  4. [name] 表示原文件的文件名(不含后缀名)。例如 logo.png 就是指 logo,但一般不推荐用这个,或者就算用这个,也要加上 [hash],不然不同文件夹有同名文件就出问题了;
  5. [hash] 的全部实际为:[<hashType>:hash:<digestType>:<length>],中间用冒号连接,除了 hash 都可以省略,通常使用默认的就行了,顶多带个长度来限制文件名长度。

2.2、context

名称 类型 默认值 描述
context {String} this.options.context 配置自定义文件 context,默认为 webpack.config.js context

简单暴力的说,影响 name 中的 [path]

举例:

  1. 根目录文件夹名为:file_loader
  2. 图片路径:src/logo.png
  3. 打包文件夹是:dist
  4. 配置为:context: __dirname + '/../'name: '[path][name].[ext]'
  5. 打包结果:dist/file_loader/src/logo.png

2.3、publicPath

名称 类型 默认值 描述
publicPath {String|Function} __webpack_public_path__ 为你的文件配置自定义 public 发布目录

publicPath 这个一般会用webpack本身配置的,和那个效果也一样,但假如你想单独配置,就用这个。

举例:

  1. 假如,你计划把图片打包到放到CDN,我随便举个例子:https://www.abc.com/img这个目录下;
  2. 由于 CDN 和你本地服务器的网址肯定不同,所以你显然是需要通过绝对路径来加载这个图片的;
  3. 假如,图片名字为:logo.png(为了方便理解,我不加[hash]),那么预期图片的 url 为:https://www.abc.com/img/logo.png
  4. 那么,你这样配置就可以了:publicPath: 'https://www.abc.cn/img/'name: '[name].[ext]'
  5. 于是,图片被打包到img文件夹下,加载该图片的链接是:https://www.abc.cn/img/logo.png
  6. 最后,你把img文件夹整个丢到 CDN 上,就ok啦;

2.4、outputPath

名称 类型 默认值 描述
outputPath {String|Function} 'undefined' 为你的文件配置自定义 output 输出目录

这个就更简单了,就是相当于在name之前加了一个文件夹路径;

示例代码:

name: '[name].[ext]',   // 文件名,这个是将图片放在打包后的img文件夹中
publicPath: 'https://www.abc.cn/img/',
outputPath: 'myImage/'    // 这里记得后面要加一个斜杠

图片路径为:src/logo.png,打包后引用该图片的 url 变为:https://www.abc.cn/img/myImage/logo.png

效果和以下配置是一样的:

name: 'myImage/[name].[ext]',   // 文件名,这个是将图片放在打包后的img文件夹中
publicPath: 'https://www.abc.cn/img/',

但优点在于,这个属性可以配为函数,因为是函数,所以就可以判断环境,然后返回不同的值;

当然,name 也可以实现(写成一个函数的返回值,例如 name: getName()),但毕竟不好看,对吧;

注:

1、如果要写成函数,应该写成如下形式:

outputPath: function (fileName) {
    return 'myImage/' + fileName    // 后面要拼上这个 fileName 才行
}

2.5、useRelativePath

名称 类型 默认值 描述
useRelativePath {Boolean} false 如果你希望为每个文件生成一个相对 url 的 context 时,应该将其设置为 true

一般不启用这个。

至于效果,简单来说,当这个开关打开时:

  1. 首先会获取源代码中,图片文件,相对于css文件的路径关系;
  2. 然后打包后,css 代码通常会被打包到 js 文件中,于是根据之前所获取的【路径关系】,来保存打包好的图片文件;

举例来说:

  1. 图片路径:src/img/logo.png
  2. css 路径:src/style/style.css
  3. useRelativePath 设为 true;
  4. css被打包到js后,js的文件路径:dist/dist.js
  5. 打包后的图片路径:img/logo.png
  6. 原因是图片相对于css的路径关系是:css文件的上级目录的img文件夹中命名为logo.png;

2.6、emitFile

名称 类型 默认值 描述
emitFile {Boolean} true 默认情况下会生成文件,可以通过将此项设置为 false 来禁止(例如,使用了服务端的 packages)

简单粗暴的说,这个设置为 false 后,除了图片不会被打包出来,其他都按正常的来。

目录
相关文章
|
13天前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
31 5
|
13天前
|
前端开发 JavaScript
webpack相关配置
以上只是Webpack配置的一些常见部分,实际应用中还可以根据具体的项目需求和场景进行更复杂和细致的配置,以满足不同的构建和优化要求。
30 2
|
13天前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
22 3
|
19天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
36 6
|
21天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
52 7
|
22天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
1月前
|
JavaScript
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
这篇文章是关于如何在webpack环境中配置Vue.js,包括安装Vue.js、解决报错、理解el与template的区别、使用SPA模式、抽离模板为对象、封装为单独的js文件、安装vue-loader时遇到的问题及解决方案,以及整个过程的总结。
71 2
webpack学习三:webpack初始化整合配置vue,一步一步的抽离代码块整合vue。
|
20天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
31 2
|
22天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
1月前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
56 1
下一篇
无影云桌面