Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog

小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くことで src ディレクトリをルートにしてパスを指定することができるようになるのだけど resolve: { modules: [ path.resolve(__dirname, 'src'), "node_modules" ], }, 同僚氏に npm でいれたパッケージか、src にあるファイルか分からないから、src ディレクトリの alias を定義したらどうか、と勧められた。 resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, これで

[zakuro9715]

alias に特殊な文字列を使うの、エディタの補完とかが動かなくなるので個人的には好きじゃない。 プロジェクトルートを modules に追加すれば設定とかで対応できる。あるいは、alias を `@` じゃなくて `src` にするとか

[easy-breezy]

後から導入しづらいやつ…

[hinaloe]

エイリアスくらいみんな使ってるよね？

[yug1224]

modulesでやってたけどailiasの方がわかりやすくていいね

[tyage]

なるほどー。あとはwebpack依存コードを許容するかとのバランスだなぁ

[shibe97]

有用っぽい

[pekeponnn31]

なるほど