importのパスにエイリアスを指定する方法

はじめに

プロジェクトが大きくなると、コードが多くなり、階層構造も複雑になるため、パス指定が複雑になってしまいます。

import UseEffectHookExmaple from './../../useEffect'

webpackのresolve.aliasにパスを指定する

resolve: {
    alias: {
      '@practice': path.resolve(__dirname, './src/practice'),
    },
},

絶対パスなので階層構造気にせず指定できるので、パスを間違えずにモジュールをimportできます！

import UseEffectHookExmaple from '@practice/useEffect'

TypeScriptの場合は、tsconfig.jsonにも設定が必要

baseUrlとpathsに設定が必要です。
https://qiita.com/Nekonecode/items/09b26deec21a5f83adb1
baseUrlは、上記の記事が分かりやすいです！

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      // alias
      "@practice/*": [
        "src/practice/*"
      ]
    }
  }
}

以上