importパスにエイリアスをかけてパス指定を楽にする

はじめに

フロントエンドの開発で嫌という程、経験したのですがプロジェクトが大きくなり階層構造が増えれば増えるほどimportによるパスの指定が複雑になってきます。
特に、ユーザによってデザインの出し分けをする場合、どこのコンポーネントを表示させるか相対パスで指定するのは悲惨でした（笑）
その解決策の１つとして、パスにエイリアスをかけてパス指定を楽にする方法を紹介します。

通常のパス指定

通常パスを指定する場合、今いるファイルからの相対パスで指定します。

import Header from '../../../../../apartment/Header'
import Footer from '../../../../../house/Footer'

これでは、プロジェクトが大きくなって階層構造が増えるとパスの指定が非常にややこしくなります。

エイリアスを使ったパス指定

webpack.config.jsにaliasを指定します。

webpack.config.js

module.exports = {
  ...
  resolve: {
    alias: {
      '@apartment': path.resolve('src/components/designSet/apartment'),
      '@house': path.resolve('src/components/designSet/house'),
    }
  }
}

これで、エイリアスを指定しなかったパスを簡単に指定することができます。

// src/components/designSet/apartment/Headerのエイリアス
import Header from '@apartment/Header'
// src/components/designSet/house/Headerのエイリアス
import Footer from '@house/Footer'

解決