Webpackの設定で @をプレフィックスとしたimportが可能にする

webpack.mix.jsはLaravel Mixで使用されるWebpackの設定ファイルです。WebpackはReactのビルド時に使用されるツールであり、importのパス解決を担っています。

Webpackで絶対パスを使うには、Webpackの設定ファイルにてresolve.aliasを指定します。Laravel Mixではwebpack.mix.jsでこれを設定することができます。

例えば、resources/jsにあるファイルを絶対パスで読み込む場合は、以下のように記述します。

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js'),
    },
  },
});

このように設定することで、@をプレフィックスとしたimportが可能になります。

import App from '@/components/App';

上記の例ではresources/js/components/App.jsを読み込むことができます。