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

小ネタ。

Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。

以下のように書くことで src ディレクトリをルートにしてパスを指定することができるようになるのだけど

resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      "node_modules"
    ],
},

同僚氏に npm でいれたパッケージか、src にあるファイルか分からないから、src ディレクトリの alias を定義したらどうか、と勧められた。

resolve: {
    alias: {
        '@': resolve(__dirname, 'src'),
    },
},

これで、どの階層にあるかに関係なく、import store from "@/store" とか import router from "@/router" とか書ける。Vue の Progressive Web App template や Nuxt.js でも同様のことをやっている。最悪、記号の単純な置換か、簡単なスクリプトを書けば済むので、筋は悪くないと思う。