Laravelでwebpackを使うときに便利なLaravel Mixを導入してみる

Laravel2021.11.14

PHPのフレームワークであるLaravelではバックエンドのアプリケーション開発に用いられますが、フロントエンド側の開発も想定され、node_modulesのインストール環境も用意されております。その中でもwebpackを使ったフロントエンド開発環境が簡単に作成できる「Laravel Mix」はとても便利です。今回はLravel Mixの導入と基本的な使いかたをまとめてみたいと思います。 Laravel MixですがLaravelのインストール直後はnode_modulesが用意されていないため、npmでインストールする必要があります。といっても必要なモジュールはpackage.jsonにまとめられており、専用のスクリプトファイルである「webpack.mix.js」は最初から用意されています。

laravel_root
  ┣ app
  ┣ bootstrap
  ┣ config
  ┣ database
  ┣ public
  ┣ assets
    ┣ css
    ┣ js
    .......
  ┣ resources
  ┣ routes
  ┣ storage
  ┣ tests
  ┣ vendor
  .......
  ┣ package.json
  ┗ webpack.mix.js

このようにLaravelのプロジェクトルートに、package.jsonがありますので、その場所で下記のコマンドを実行し必要なモジュールを一括でインストールしていきます。

$ npm install

インストールが完了したらソースファイルを準備していきます。基本的に独自で作成してもいいのですが、Laravelにはもともとソースファイル用のディレクトリが用意されているので「resources」配下にSassファイルやスクリプトファイルを下記のように格納していきます。

laravel_root
  ┣ .......
  ┣ resources
    ┣ .......
    ┣ sass
    ┣ scss
    ┗ es

これで準備は完了しました、実際にwebpack.mix.jsファイルに処理を作成しLaravel Mixを使っていきます。

Laravel MixでSassのコンパイル

まずはSassファイルをCSSファイルにコンパイルする環境を作成していきます。webpack.mix.jsに下記のように記述します。まずはLaravel Mix用のモジュールを読み込みます。そのあと、Laravel Mix専用のメソッドをつなげていきます。【webpack.mix.js】

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

// SCSS
const sourceSassFile = 'resources/scss/main.scss'; 
// SASS
// const sourceSassFile = 'resources/scss/main.scss';

mix.sass(sourceSassFile, 'assets/css/main.min.css', {
  sassOptions: {
    outputStyle: 'compressed'
  }
}).options({
  processCssUrls: false
}).sourceMaps(true, 'inline-source-map');

「sass()」メソッドではSassファイルをCSSにコンパイルしていきます。第一引数にはソースファイルを、第二引数にはコンパイル後のファイルをそれぞれパスで指定します。第三引数ではSassのコンパイルオプションが指定できます。ここでは「compressed」を指定しミニファイ化しています。続いて、「options()」メソッドですが、この中の「processCssUrls」のオプションでCSS内のURLリライトの設定ができます。通常では相対パスで記述されているものがルートパスにリライトされ置き換わるようになっているのですが、falseを指定することでリライトされずにそのまま相対パスで使えるようになります。最後にソースマップ用のメソッドでデバックの際のマッピングを有効化します。そして実際に下記のコマンドなどでコンパイルできるようになります。

// 開発環境ビルド
$ npm run dev

// 開発環境ファイル監視
$ npm run watch

// 本番環境ビルド
$ npm run prod

本番環境でのキャッシュバスティング

本番環境の場合にはCSSなどのキャッシュ対策としてクエリパラメータが付与されることもあります。（参考記事「ウェブサイト更新時のキャッシュ対策にファイルへのクエリパラメータを追加する」）Laravel Mixではクエリパラメータを使ったバージョン管理ができるメソッドが用意されています。下記のように「version()」メソッドを使うことで簡単に対応することができます。必要となるのは本番環境だけになるので以下のように条件分岐をしておくといいですね。【webpack.mix.js】

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

if (mix.inProduction()) {
  mix.version();
} else {
  mix.sourceMaps(true, 'inline-source-map');
}

次に読み込む側のHTMLでファイルパスで参照するのですが、その時に「mix()」メソッドを使い引数にファイルパスを指定してあげる必要があります。これでクエリパラメータが追加されるようになります。【index.blade.php】※一部抜粋

<head>
  .....
  <link rel="stylesheet" href="{{ mix('/assets/css/main.min.css') }}">
  .....
</head>
<body>
  .....
  <script src="{{ mix('/assets/js/main.min.js') }}"></script>
</body>

実際にビルドされると下記のようにランダムな英数字でキャッシュ対策用のクエリパラメータが付与されているのが確認できます。

<link rel="stylesheet" href="/assets/css/main.min.css?id=***********">
<script src="/assets/js/main.min.js?id=***********"></script>

ちなみにファイルをビルドすると、公開用ディレクトリ直下に「mix-manifest.json」というファイルが表示され、ビルドファイルの情報がまとめられるようになっています。【mix-manifest.json】

{
  "/assets/js/main.min.js": "/assets/js/main.min.js?id=**********",
  "/assets/css/main.min.css": "/assets/css/main.min.css?id=**********"
}

JavaScriptトランスパイル＆Vueコンポーネントコンパイル

Laravel MixではSassのコンパイル以外にも、ES6のトランスパイルやVueコンポーネントファイル（.vueファイル）のコンパイルもできます。まずは下記のようにES6での記述やVueファイルを扱う処理などをソースファイルで記述していきます。【resources/es/main.js】

import App from './vue/app.vue';
window.Vue = require('vue');

// Vue.js
new Vue(App).$mount('#app');

あとはLaravel Mix側でJavaScriptのコンパイル処理を作成するのですが、「js()」メソッドを使うだけで簡単に実現できてしまいます。Sassの時と同様に第一引数にはソースファイルを、第二引数にはビルド後のファイルを指定します。一部ドキュメントには「vue()」メソッドを追加するなどの記載がありますが、ビルド時にエラーが発生し、現在ではjs()メソッドのみでVueファイルのコンパイルも対応されているようで不要みたいですね。【webpack.mix.js】

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

mix.js('resources/es/main.js', 'assets/js/main.min.js');

実際にビルドしてみるとコンパイルされていることが確認できます。モジュールのインポートや、Vueファイルを扱う場合、また旧ブラウザ用にES2015への対応が必要となる時にはとても便利ですね。Laravel Mixではそれ以外にもReactのコンパイルやTypeScriptにも対応しているメソッドがあるようです。詳しくは各種ドキュメントを参考にしてみてください。

publicディレクトリの変更などに伴う出力先ディレクトリ変更

Laravel MixではデフォルトでLaravelのプロジェクトルートにビルドされるようになっているのですが、公開用ディレクトリをLaravelのルートディレクトリ外に出すこともあります。そんな時には下記のようにビルド先のディレクトリを変更しておきます。下記では公開用のpublicディレクトリを一階層上げて、Laravelのルートディレクトリと同階層に配置した場合になります。] 【webpack.mix.js】

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

mix.setPublicPath('../public/');

そのほかにも、デフォルトではOS側の通知機能が有効になっており、ビルドされるたびにダイアログが表示されるのが気になる、、という場合には通知機能をOFFにしておくのもいいですね。

mix.disableNotifications();

普段はフロントエンド開発や静的コーディングでwebpackの環境を使うことが多いのですが、Laravel Mixではデフォルトで便利なメソッドがたくさん用意されており、Laravelでの開発と相性が良い仕様になっています。どうしても自前でwebpackの環境を構築しないといけない場合以外には、手軽にwebpackの開発環境が構築できるLaravel Mixを活用してみたいですね。（参考にさせて頂いたサイト） Laravel 5.6 アセットのコンパイル(Laravel Mix)