Laravel Mixでwebpackを簡単に利用する」ってどういうこと？

はじめに

業務上活用しているLaravel　Mixにてコンパイル関連で色々と模索していおり、
今更ですがLaravel　Mixについて整理したことを備忘録としてまとめました。

まず、Laravel　Mix公式を見てみると

以下公式サイトhttps://readouble.com/laravel/5.5/ja/mix.html より引用

Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Webpackやアセットのコンパイルを始めようとして、混乱と圧倒を感じているならLaravel Mixを気に入ってもらえるでしょう。しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても良いのです。

なるほど、わからん。カタカナ語が使いたい年頃の人が書いた文書のようにになっていますが、ざっくり言うと「webpackというモジュールバンドラー（モジュールの束）を簡単に使えるようにしたラッパー」ということだと後になって理解しました。

以下でもうちょっとだけ詳しく見ていきます。

概要

①Laravel Mixとは、フロントエンドのアセット(JS,SASS等)をコンパイル、バンドルしてくれるツール
②webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている
③lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる
⑤Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる

使い方

Laravelをインストールした段階で、package.jsonとwebpack.mix.jsが用意されています。

・package.json
⇒Laravel Mix本体やその他必要なパッケージが記述済み。
package.jsonのscriptsにはwebpackを実行するためのスクリプトも記述されている。

・webpack.mix.js
⇒webpack設定ファイル（webpack.config.js）のラッパー。
ここにコンパイル対象ファイルやバンドル対象ファイルなどの設定を記述していく。

※LaravelではないアプリでLaravel Mixを使う場合でも、
package.jsonとwebpack.mix.jsの2ファイルを用意するだけであとは同じです。
Laravel Mix公式サイトのStand-Alone Projectを参考に。↓
https://laravel-mix.com/docs/5.0/installation

設定ファイルの記述

webpack.mix.jsに、設定を記述する。

sassファイルをコンパイルしたい場合

mix.sass('resources/assets/sass/app.scss', 'public/css');

cssファイルをバンドルしたい場合

mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

jsをコンパイルしたい場合

mix.js('resources/assets/js/app.js', 'public/js');

jsファイルをバンドルしたい場合

mix.scripts([
    'public/js/admin.js',
    'public/js/dashboard.js'
], 'public/js/all.js');

他にもいろいろ設定できることはある。

Laravel Mixの実行
npm run dev を実行すると、package.jsonに書いてあるスクリプトが実行され、
設定ファイルに記述したコンパイル、バンドルが実行される。

npm run production の場合は圧縮されたファイルが出力される。

知っておくと良い機能抜粋

もう少し具体的な機能について、知っておいたほうがいい主な機能を抜粋。

jsのコンパイル
上記の通り、jsファイルをコンパイルするには

mix.js('resources/assets/js/app.js', 'public/js');
と書く。

この処理では
・ES2015記法
・モジュール
・.vueファイルのコンパイル
・開発環境向けに圧縮
のコンパイルが実行される。

①babel実行
jsファイルをバンドルする設定として、mix.scripts()を紹介したが、
この代わりにmix.babel()を使うことができる。

これをすると、バンドルされたファイルはES5記法に変換された状態になる。

IEはES5までしか対応していないため、もしIEでも動作させる必要があるシステムの場合は
このmix.babel()機能を使ってES5記法に変換するほうが良い。

ES5, CoffeeScript, ES6の記法の違い

②キャッシュバスティング

mix.js('resources/assets/js/app.js', 'public/js')
   .version();

このように記述すると、
ファイル名の末尾に一意のハッシュ値が付与される。

これによって、コンパイルのたびにファイル名が変更されるため、CSSやJSなどがブラウザキャッシュに残って変更が反映されないことを防止できる。
このファイルを読み込むbladeファイル側では、

のようにmix()関数を使うことで、ハッシュ値のついたファイル名でも取得することができる。

おわりに

Laravel Mixにはオプションの指定で挙動を簡単に変えられるという特徴もあります。
そのあたりのカスタマイズについてのメモがたまってきたのでまた、整理していこうと思います。

とりあえず、CSS側のコンパイルが極端に遅い方は
"processCssUrls: false"を試してみましょう。
（画像PASSの書き換えオプションをOFFにする。デフォルトはON。）

例）

mix.sass('src/app.scss', 'dist/')
   .options({
      processCssUrls: false
   });

詳細はまた後ほどほどまとめます！

参考
https://readouble.com/laravel/5.5/ja/mix.html
https://laravel-mix.com/docs/5.0/quick-webpack-configuration