## 文件路径优化
做到这里，我们简单休息下。做一些简单的配置优化~
在之前写的代码中，我们引用组件，或者页面时候，写的是相对路径。
比如`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'
~~~
就是这样！
