讓WebStorm識別alias

1. 創建webpack.intellij.js
   專案root目錄下，創建一個webpack.intellij.js，這個檔案將會被WebStorm用來辨識Webpack的配置，包括alias(路徑別名)。

2. 配置webpack.intellij.js
   alias換成你自己的，可直接複製webpack.config的alias

   const path = require("path");
   module.exports = {
   resolve: {
       alias: {
           $DATA: path.resolve(__dirname, "./data"),
           $ACTIONS: path.resolve(__dirname, "./actions"),
           "@": path.resolve(__dirname, "./components"),
       },
   },
   };
   

3. WebStorm設置

   • 打開 Settings
   • Languages & Frameworks > JavaScript > Webpack。
   • 選Manually，Configuration file選擇你剛剛的webpack.intellij.js
     
4. 重啟WebStrom
   重新啟動WebStorm以確保新的設定生效

結語：
至此，我們已經成功完成了設定。若專案中alias用得多，最好還是配置一下讓WebStorm能識別alias。不僅能提升開發體驗，而且避免了未配置時，WebStorm解析alias太多的檔案可能會出現的 analyzing卡住 和 代碼highlight顯示異常問題。