laravel-mixとは？
- webpackをLaravel用に使いやすくした物です。
- フロントエンドのアセットをバンドルやコンパイルしてくれるツールです。
- webpackを使用しています。
- less、sass、babel等のよく使われるローダーが最初から用意されている。
- Laravel5.4以上であればデフォルトで入ってきます。
- Laravel9.19.0からはデフォルトのビルドツールがviteに変更になりました。今後はViteのキャッチアップなども意識して行った方が良いでしょう。
実行方法
コンパイルを実行します。
|
1 |
npm run dev |
コンパイルして圧縮(minify)して出力します。（本番用）
|
1 |
npm run production |
webpack.mix.jsとは？
laravel-mix(Laravel用webpackのラッパー、webpack.config.jsのラッパーです。)の設定ファイルです。laravel-mixの設定ファイルです。
ファイルの中身
デフォルトでは下記の記述がされています。
|
1 2 |
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); |
「resources/js/app.js」という元ファイルを「public/js」にまとめて出力するという設定になっています。
mix.webpackConfig
webpackのオプションを拡張できます。
ViteとLaravel mixの比較
ビルド速度のベンチマークしている人がいましたが、デフォルト設定ではLaravel mixに比べてViteは2/3くらいのビルド速度になっています。
また、Viteには「HMR（Hot Module Replacement）」というフロントエンドのソースをいじった動的に開発中のサイトを更新してくれる機能がありますが、それも高速です。
ただ、webpackもカスタマイズすればViteに匹敵するくらいのパフォーマンス速度を出すことは可能です。（ただ、デフォルトでも相当な速度を出せるのはViteの強みと言えるでしょう。）
なお、laravel-mixとViteの共存などはできないので注意が必要です。（Viteを使う場合はlaravel-mixは削除する必要がある。）
今後は、Laravel関連パッケージは、webpackではなくViteに特化したパッケージがどんどん出てくると思われるので注目です。
この記事へのコメントはありません。