目次 インポートのエイリアス化とは WebPackのエイリアス定義 TypeScript用のエイリアス定義 インポート ディレクトリのエイリアス ファイルのエイリアス インポートのエイリアス化とは 階層が深くなっていくと、importする際に「../../../../Hoge」のような「../」などの相対パスが複数記載されることがあります。 共通コンポーネントなどは特に複数箇所からの利用が行われるため、上記のようなパスをエイリアスを設定することで、「@Hoge」のようにまとめる事ができます。 WebPackのエイリアス定義 以下のようなディレクトリ構造の前提で記載します。 src ┣ index.ts ┗components ┣ file.ts ┗ dir ┗ fileee.ts 「webpack.config.js」を以下のようにエイリアスの定義を行います。 module.exports