webpack配置alias簡化相對路徑

使用場景：當組件層級較深時，底層組件需要使用其他模塊的組件，就需要寫很多個../../，這個時候就會顯得路徑很長，還不直觀。如下

在src->pages->Test->Test1的index組件中，需要引用App.tsx組件，這個時候，就會顯得../很多，看起來不直觀。

如何解決呢？此時就需要webpack配置alias簡化相對路徑，使用@來代替多個../。

首先，到webpack.config.js文件中找到resolve的alias，在alias中進行配置，配置的格式為

 

 

我們配置一個src的路徑，這樣就可以直接使用@src/App找到App組件，具體配置如下：

 

 

 注意！！！配置完成之后，重啟服務，否則配置不生效。

配置完成之后，我們再回到Test1組件，將引用方式改為@src/App，但是會報錯，說找不到模塊。

 

 

 這個時候我們就要去配置一下tsconfog的baseurl和paths。具體配置如下：

 

 

注：/*表示當前目錄下所有的文件 ，如果只想解析pages，則可在alias中繼續添加配置在tsconfig中也要將pages添加進去

 

 

 

配置完畢，保存。此時頁面顯示正常，無錯，App組件也引入到Test1組件當中。

 

 

 注：如果還是報錯，就重啟編輯器