## 圖片處理
要讓 webpack 處理 圖片 文件，需要使用到加載器: url-loader
安裝
```
yarn add url-loader --dev
```
在 `conf/webpack.config.js` 的 `module.rules` 中配置:
```js
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'url-loader'
]
}
```
這樣，就可以直接引入圖片文件了
在 `src/main.js` 中直接引入圖片即可
```js
import img from './img/img.png';
let myImg = new Image();
myImg.src = img;
console.log(myImg)
```
在 css 中引入相同
```
.box {
width: 200px;
height: 200px;
background: url(../img/img.png);
}
```
事實上，url-loader 可以接受任何類型的文件，將文件轉化為 url 的形式，包括 字體、聲音、視頻、媒體文件 等。
