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

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

手把手教你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 后,除了图片不会被打包出来,其他都按正常的来。

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

相关文章
caffe编译好后,需要配置.bashrc
caffe编译好后,需要配置.bashrc
6 0
想将算法进一步开发吗?手把手教你搭建基于CNN模型的Flask Web应用
想将算法进一步开发应用产品吗?本文手把手教你搭建基于CNN模型的Flask Web应用,算是抛砖引玉了。感兴趣的读者可以将自己的算法开发成其他类型的应用产品,说不定下一个人工智能创业公司Boss就是你哦!
4890 0
手把手教你如何进行FileZilla的安装
FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户端工具,而FileZilla Server则是一个小巧并且可靠的支持FTP&SFTP的FTP服务器软件。
1714 0
webpack配置
webpack配置 配置 Webpack 的方式有两种: 通过一个 JavaScript 文件描述配置,例如使用 webpack.config.js 文件里的配置; 执行 Webpack 可执行文件时通过命令行参数传入,例如 webpack --devtool source-map。
2353 0
spring profile 多环境配置管理
本地、测试、开发、产品等不同环境文件配置 现象   如果在开发时进行一些数据库测试,希望链接到一个测试的数据库,以避免对开发数据库的影响。   开发时的某些配置比如log4j日志的级别,和生产环境又有所区别。
694 0
Samba的简介和配置
简介:本文只是讲一讲我们最常用的Linux与Windows共享文件,主要是为新手指一指路。如何建立最简单的Samba服务器,并讲述遇到问题应该从何处寻找解决方案;正在更新之中,希望您的参加 ... ... 谢谢; 目录       0、架设Samba 服务器的前提;             0.1 查看文件内容和编辑文件的工具;             0.2 关于文件和目录相关;
1547 0
webpack常见的配置项
使用vue init webpack test(项目文件夹名)命令初始化一个vue项目,cd test,然后安装依赖npm install之后会生成一些默认的文件夹和文件,这些文件和文件夹中有些和配置有关的。
1234 0
五分钟搞定 HTTPS 配置,二哥手把手教
五分钟搞定 HTTPS 配置,二哥手把手教
6 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载