Laravel Mix (webpack) で、ロードパスのAliasを作ると ../../ が無くなって便利

Laravel というよりは Webpack の話なんだけど、もっと早く設定しておけば良かったと思ったのでメモ。

前提

• Laravel 5.4
• webpack (Laravel mix)

で開発している。

問題

自分で作ったコンポーネント等を読み込む時に、相対パス指定していた。
が、それだと、 import Hoge from '../../Hoge.vue' などとなって分かりにくいし、ディレクトリ構成を変えると毎回変えるのが面倒だった。

解決策

下記を webpack.mix.js の最初の方に加える。

webpack.mix.js

mix.webpackConfig({
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/assets/js'
    }
  },
})

これで、 import Hoge from '@/components/Hoge.vue' と呼び出せて分かりやすい。

vue-cli では、最初から @ が src になるように設定されているので気づいた。

Laravel Mix でもそのうちデフォルトで設定されるようになるかもしれない。
プルリク送ってみようかな。

参考

• https://readouble.com/laravel/5.4/ja/mix.html
• https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.config.js#L209

関係ないけど、 Laravel mix で調べると Laravel Elixir の情報ばっかり出てくるのがつらい