file-loader从名字就上大概可以猜测出来，是一个通用文件处理loader。file-loader在Webpack中的作用是，处理文件导入地址并替换成其访问地址，并把文件输出到相应位置。其中导入地址包括了JavaScript和CSS等导入语句的地址，例如JS的import和CSS的url()。
这么说并不好理解，我们举两个个例子。
一、file-loader处理JavaScript引入的图片
这个例子配套github仓库 https://github.com/jruit/webpack-tutorial 的webpack3-4
这个例子的目标是用JS操作原生DOM，把一张图片插入到指定的div里。
首先是一个html页面index.html，我们在该html里引入了打包后的bundle.js，html里有一个id="main"的div。
接着看一下打包前的JS文件a.js。我们用import语法引入了一个jpg图片文件，原生的JS并不支持这种import语法引入图片的，这里就需要借助file-loader的能力了。稍后可以看一下我们的Webpack配置。
然后我们使用console.log(img)在控制台输出import后的img，它是一个字符串，字符串内容是file-loader处理后的图片访问地址。
最后我们用原生的DOM操作，把图片插入了id="main"这个div元素里。
html和a.js的代码如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bundle.js"></script>
</head>
<body >
<div id="main"></div>
</body>
</html>
// a.js
import img from './sky.jpg';
console.log(img);
var dom = `<img src='${img}' />`;
window.onload = function () {
document.getElementById('main').innerHTML = dom;
}
现在看一下我们的Webpack配置文件。配置很简单，入口文件就是我们上面的a.js，打包后生成的bundle.js放在项目根目录。
然后还有一个file-loader用来处理jpg文件，我们的sky.jpg图片也存放在项目根目录。
// webpack.config.js
const path = require('path');
module.exports = {
entry: './a.js',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.jpg$/,
use: 'file-loader'
}]
},
mode: 'none'
};
现在npm install file-loader@6.0.0安装好相应的npm包后，执行npx webpack打包，打包后的目录结构如下图所示。
npm install webpack webpack-cli --save-dev npm install file-loader@6.0.0
我们用chrome打开html文件并开启开发者工具，如下图所示。
可以看到，我们已经成功把图片插入到了div里，并且控制台输出的图片路径是 be735c18be4066a1df0e48a1173b538e.jpg
二、file-loader处理CSS引入的图片
上面的例子描述了file-loader处理JS引入的图片，这个例子展示file-loader处理CSS引入的图片，配套github仓库 https://github.com/jruit/webpack-tutorial 的webpack3-5
这个例子的目标也很简单，写一段CSS把页面的body元素设置一个背景图片sky.jpg。
显然我们要写CSS首先需要处理CSS的相关loader，css-loader和style-loader，关于这两个loader的使用可以看 https://www.jiangruitao.com/webpack/loader/ 一节。
CSS里设置背景图片需要使用background: url()语法，为了能Webpack支持处理图片，我们需要使用file-loader。
这个例子过多的细节在这里无需介绍，详细代码和打包后的目录结构以及页面效果都在下方，直接看代码等效果更好，相应的npm包都已经介绍过了，在配套代码里直接npm install安装即可。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="bundle.js"></script>
</head>
<body>
<div class="hello">Hello, Loader</div>
</body>
</html>
// a.js import './b.css'
body {
background: url(sky.jpg) no-repeat;
}
// webpack.config.js
const path = require('path');
module.exports = {
entry: './a.js',
output: {
path: path.resolve(__dirname, ''),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
test: /\.jpg$/,
use: 'file-loader'
}]
},
mode: 'none'
};
三、file-loader的其它知识
上面两个例子只是介绍了file-loader在JS和CSS引入图片的时候该如何使用。
file-loader不仅仅可以处理图片资源，它本质功能是复制资源文件并替换访问地址，音视频等资源也可以使用它。
更多关于file-loader的知识，例如打包后的图片名称为何变成了be735c18be4066a1df0e48a1173b538e.jpg以及处理路径地址的一些细节，我们放在下节 https://www.jiangruitao.com/webpack/url-loader/ 讲解。
下一节我们讲url-loader，它是file-loader的增强版，它实现了file-loader的所有功能并增加了额外的功能。
笔记与思考