大家好，又见面了，我是全栈君。
FILE-LOADER配置简述
前注：
文档全文请查看 根目录的文档说明。
如果可以，请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里，发【Issues】。
DEMO地址
1、概述
简单来说，file-loader 就是将文件（由于一般是图片文件为主，所以下面通常使用图片两字作为替代，方便理解。其他的包括字体文件等），在进行一些处理后（主要是处理文件名和路径），移动打包后的目录中。
处理的内容包括：
- 文件名的处理，比如加
[hash]； - 路径的处理，比如【把图片文件统一放到img文件夹中】；
优点：
相较于 url-loader 可以将图片转为base64字符串，file-loader 在功能上更加强大一些；
缺点：
实际开发中，将一定大小以下的图片转为 base64字符串，有利于加载速度的提升。
2、配置
2.1、name
| 名称 | 类型 | 默认值 | 描述 |
| name | {String|Function} | [hash].[ext] | 为你的文件配置自定义文件名模板 |
简单的来说，这个就是规定，如何命名打包后的文件夹的文件名的。
默认值表示：命名是 哈希值 + 扩展名 的形式。
常见命名方式是：img/[hash].[ext]，即将所有的图片（准确的说，是被file-loader处理的文件），都打包到 img 文件夹下。
几点：
-
[hash:6]可以控制 hash 值的长度，6 表示长度为6，默认是 32； -
[ext]表示是原文件的扩展名，应该没人会想改这个吧？ -
[path]不好用一句话概括。举个例子，图片在/src/logo.png，打包后文件夹是dist，配置为'[path][name].[ext]'，那么图片最终为：/dist/src/logo.png。实际上是相对于context的路径，context默认是webpack.config.js的路径； -
[name]表示原文件的文件名（不含后缀名）。例如logo.png就是指logo，但一般不推荐用这个，或者就算用这个，也要加上[hash]，不然不同文件夹有同名文件就出问题了； -
[hash]的全部实际为：[<hashType>:hash:<digestType>:<length>]，中间用冒号连接，除了 hash 都可以省略，通常使用默认的就行了，顶多带个长度来限制文件名长度。
2.2、context
| 名称 | 类型 | 默认值 | 描述 |
| context | {String} | this.options.context | 配置自定义文件 context，默认为 webpack.config.js context |
简单暴力的说，影响 name 中的 [path]，
举例：
- 根目录文件夹名为：
file_loader； - 图片路径：
src/logo.png； - 打包文件夹是：
dist； - 配置为：
context: __dirname + '/../'，name: '[path][name].[ext]'； - 打包结果：
dist/file_loader/src/logo.png；
2.3、publicPath
| 名称 | 类型 | 默认值 | 描述 |
| publicPath | {String|Function} | __webpack_public_path__ | 为你的文件配置自定义 public 发布目录 |
publicPath 这个一般会用webpack本身配置的，和那个效果也一样，但假如你想单独配置，就用这个。
举例：
- 假如，你计划把图片打包到放到CDN，我随便举个例子：
https://www.abc.com/img这个目录下； - 由于 CDN 和你本地服务器的网址肯定不同，所以你显然是需要通过绝对路径来加载这个图片的；
- 假如，图片名字为：
logo.png（为了方便理解，我不加[hash]），那么预期图片的 url 为：https://www.abc.com/img/logo.png； - 那么，你这样配置就可以了：
publicPath: 'https://www.abc.cn/img/'，name: '[name].[ext]' - 于是，图片被打包到
img文件夹下，加载该图片的链接是：https://www.abc.cn/img/logo.png； - 最后，你把
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 |
一般不启用这个。
至于效果，简单来说，当这个开关打开时：
- 首先会获取源代码中，图片文件，相对于css文件的路径关系；
- 然后打包后，css 代码通常会被打包到 js 文件中，于是根据之前所获取的【路径关系】，来保存打包好的图片文件；
举例来说：
- 图片路径：
src/img/logo.png； - css 路径：
src/style/style.css； - useRelativePath 设为 true；
- css被打包到js后，js的文件路径：
dist/dist.js； - 打包后的图片路径：
img/logo.png； - 原因是图片相对于css的路径关系是：css文件的上级目录的img文件夹中命名为logo.png；
2.6、emitFile
| 名称 | 类型 | 默认值 | 描述 |
| emitFile | {Boolean} | true | 默认情况下会生成文件，可以通过将此项设置为 false 来禁止（例如，使用了服务端的 packages） |
简单粗暴的说，这个设置为 false 后，除了图片不会被打包出来，其他都按正常的来。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/107837.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
