【webpack】 拡張子を省略したり、パスに別名を設定しよう

例えば、vueファイルを読み込むときはimport App from "app.vue";のように書きますが、毎回.vueを付けるのは面倒ですよね。そういった細かい部分の設定を紹介します。

extensions

ここに設定した拡張子であれば、import時の拡張子の指定を省略できます。

module.exports = {
    // ...
    resolve: {
        // 拡張子を配列で指定
        extensions: [
          '.ts', '.js', '.vue',
        ],
    },
    module: {
        // ...
    },
}

extensionsを設定しています、これを設定することでapp.vueを読み込む場合。

import App from "app";

のように、.vueを省略したりできます。

alias

aliasは日本語で”別名”などの意味を持ちます。パスを指定したときに、実際とは別のパスを利用できるということです。

例えば、次の構成を考えてみます。

project/
├ dist/
│ ├ js/
│ └ index.html
├ src/
│ ├ abc/
│ │ ├ ijk/
│ │ │ └ b.js
│ │ └ xyz/
│ │ 　 └ a.js
│ └ index.js
├ webpack.config.js
├ package-lock.json
└ package.json

この場合、abc/xyz/a.jsがijk/b.jsをimportするためにはこのように書く必要があります。

import "../ijk/b";

..する必要があって面倒です。もしリファクタリングをして位置を移動するとなった場合、都度書き換えなければなりません。そういった場面でaliasは活躍します。

const src = "/src/";

module.exports = {
    // ...
    resolve: {
        alias: {
            // エイリアス名: 実際の場所(絶対パス) という書き方
            "@": __dirname + src
        }
    },
    module: {
        // ...
    },
}

aliasの設定が増えました。この設定の@は、/srcディレクトリを指している状態です。

こうすることで、a.jsがb.jsをimportするときにこのように書けます。

import "@/abc/ijk/b";

srcディレクトリからの相対パスで書くことができるようになりました!

この@を使った書き方はよく例に出てくるものです。

少し設定を変えてみましょう。

const src = "/src/";

module.exports = {
    // ...
    resolve: {
        alias: {
            src: __dirname + src
        }
    }
    // ...
}

こうすると、

import "src/abc/ijk/b";

と書くことができます。

その他のaliasの書き方

最も多いのは、上で紹介した@です。ほかはそこまで利用しているのを見ませんので、パターンの紹介にとどめます。

それぞれをimportしたときの、実際に使われるパスを見ていきます。

色々書き方や法則がありますが、今回紹介したパターンは{ xyz: '/some/dir' }のパターンです。これ以外使うことはほぼ無いでしょう。

というのも、エイリアスを量産するとimportしている見かけ上のパスと実際のパスが噛み合わないパターンが増え、かえって管理が面倒になりかねないためです。

まとめ

aliasやresolveは一度書いた後はほとんど変更することはないはずなので、あまり覚える必要はありません。

使う時が来たら使い方を参照するという程度で考えて、そういった機能があるということと読み方を把握しましょう。