在專案中，如果我們的路徑結構很複雜，那麼我們可能匯入其他模組的時候不是很方便，這時候，我們可以配置webpack以配置別名的形式訪問

執行eject

在專案中執行 $ npm run eject 這個命令只能執行一次，而且不可逆轉，它會把react-scripts 封裝的一些webpack配置等全部解壓到專案目錄，專案結構中會多出 config 目錄 和 scripts 目錄，我們的需要配置的地方就在config 目錄中, 其中有兩個檔案需要需改：webpack.config.dev.js 和 webpack.config.prod.js 檔案，兩個檔案都是修改的同一處配置。

修改配置，新增alias別名

在webpack.config.dev.js 和 webpack.config.prod.js 檔案中搜索 alias 關鍵詞，在相關物件中新增一個鍵值對：'@': paths.appSrc，此時的appSrc 就是專案的src目錄

由於技術棧時時升級，為了防止技術升級造成的無法匹配問題的現象，在此新增版本資訊如下：

"devDependencies": {
  "react-scripts": "^1.1.4"
},
"dependencies": {
   "react": "^16.3.2"
}

此時的版本下執行 $ npm run eject 再修改上面的配置是沒有任何問題的

修改匯入檔案的寫法

好了，現在我們想要匯入 src/pages/home/index.js 只需要把import的路徑寫成 @/pages/home 就可以了，或者也可以按照相對路徑的寫法匯入，其中這裡要說明的一些情況是如果目錄中存在index.js可以直接寫成目錄名稱，不需要寫全路徑，因為如果訪問某一目錄，它預設找的就是index.js， 就像是上面的寫法，我們可以寫成 @/pages/home 的形式，也可以寫成 @/pages/home/index.js 的形式

最後總結

修改完畢，這樣以後匯入模組就方便多了！