打包图片文件

webpack 本身是不能处理图片资源的，也需要引入 loader 来打包编译。
通常我们会使用 file-loader 来处理一般的图片资源。

打包的原理

file-loader 打包图片资源，具体的作用如下：

• 帮你生成一个文件放到 dist 目录下
• 返回拷贝的路径

  安装 loader

  yarn add file-loader --dev

  配置 webpack

  配置 webpack，很简单如下： ```javascript / ./webpack.config.js / let path = require(‘path’);

module.exports = { //… module: { rules:[ { test: /.(jpeg|jpg|png|gif)$/, use:[‘file-loader’] } ] } //… }

<a name="Uds2i"></a>
## 如何使用
在 index.js 中引入一张图片，它会返回一个路径，也就是打包后图片的路径（见后面的打包产物），如下：
```javascript
/** ./src/index.js **/
import url from './test.jpeg';
let img = new Image();
img.src = url;
document.body.append(img);

打包产物

yarn build 打包，以下是打包产物

打包过后 loader 帮我们生成了一个 7c5dc6547483117604d5be4d4ee3a424.jpeg。
并且在打包后的 js 中引用，如下：

结果

打开页面可以，正常显示网页

这样我们的图片资源就被打包好了。