## 文件路徑優化
做到這里，我們簡單休息下。做一些簡單的配置優化~
在之前寫的代碼中，我們引用組件，或者頁面時候，寫的是相對路徑。
比如`src/router/router.js`里面，引用`Home.js`的時候就用的相對路徑
~~~
import Home from '../pages/Home/Home'
~~~
`webpack`提供了一個別名配置，就是我們無論在項目里的哪個路徑下，都可以使用如下路徑：
~~~
import Home from 'pages/Home/Home'
~~~
下面我們來配置下，修改`webpack.dev.config.js`，增加別名~
`webpack.dev.config.js`
~~~
function resolve (dir) {
return path.join(__dirname, dir)
}
// ...省略一些配置
// 靜態文件服務器配置
devServer: {
// ... 省略devServer配置代碼
},
resolve: {
alias: {
'@': resolve('src'),
pages: resolve('src/pages'),
components: resolve('src/components'),
router: resolve('src/router')
}
}
~~~
然后我們可以把之前的相對路徑全部改成絕對路徑。
`src/router/router.js`
~~~
import Home from 'pages/Home/Home'
import Page from 'pages/Page/Page'
~~~
`src/index.js`
~~~
import Router from 'router/router'
~~~
就是這樣！
