手把手教你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

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

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

常见命名方式是：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

简单暴力的说，影响 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 这个一般会用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

这个就更简单了，就是相当于在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

一般不启用这个。

至于效果，简单来说，当这个开关打开时：

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

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