Laravel Mix を設定する

昨今のフロントエンド開発には Webpack というモジュールバンドラーを使用することが多いです｡
複数の JS ファイルを一つに結合したり､レガシーブラウザでもモダンな文法で記述された JS を実行できるように変換(正確には Babel)したりできます｡
しかしこの Webpack は便利な反面､設定が非常に面倒で､管理も煩雑になりがちです｡

Laravel には Laravel Mix という Webpack のラッパーライブラリが付属していて､簡単な設定だけで､ Webpack の大抵の機能を使うことができます｡

まず､ laravel/ui をインストールします｡

$ composer require laravel/ui
# 6.x
# composer require laravel/ui:1.*
# 5.x 系は不要

次に package.json に記述されている JavaScript ライブラリをインストール｡

$ npm install

フロントエンド関連のファイルをビルドします｡

$ npm run dev

すると､

• resources/js/app.js → public/js/app.js
• resources/sass/app.scss → public/css/app.css

のように出力されます｡

このビルド定義は webpack.mix.js に記述されています｡
このままでも実行に問題はないですが､ブラウザでデバッグができるように､ map ファイルを出力するように設定します｡

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   // ソースマップ作成
   .sourceMaps()
   // バージョニングを有効化
   .version();

試しに JS ファイルを追加してビルドしてみましょう｡
resources/js/hello.js を作成して､以下を記述してみてください｡

alert('Hello world!');

次に､ webpack.mix.js を修正します｡

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/hello.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .sourceMaps()
   .version();

そしてビルドします｡

$ npm run dev

適当な Blade ファイルに以下を設定します｡

<script src="{{ mix('js/app.js') }}" defer></script>
<script src="{{ mix('js/hello.js') }}" defer></script>

hello.js を読み込んだページを開いたら､ブラウザ固有の alert ダイアログが表示されるはずです｡