讓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"),
    },
  },
};

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 顯示異常問題。