laravel-mix調査の備忘録 #PHP

概要

Laravel-Mix調査で知らない単語がたくさん出てきたのでそれのメモ。
そもそもLaravel-Mixなんで使うの？って理由ですが

複数のjsファイルを一つにバンドルしたい
キャッシュが原因でjs, cssの変更が反映されない問題を解決したい
npmコマンド叩きたい（今の主流はyarnらしいですが...）

上記のような理由です。

参照ページ

Laravel Mixとは

Laravel 公式ドキュメントより
Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をwebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。
全然わからん。こちとらwebpackが何者なのかすら理解できていない。
色々調べたが大体こんな感じ。

webpack君は複数ファイルを一つにまとめてくれるモジュールバンドラツール
webpack君をそのまま使うのはダルい
Laravel Mixを使うと簡単に書ける

完全に理解した。

browserSyncとは

コードを変更、保存したら自動でブラウザを更新してくれる賢いヤツ。
Laravel-Mixだと簡単に書ける。

mix.browserSync({
    proxy: '192.168.99.100',
    open: false, // ブラウザを自動で開かない
    files: [ // 監視対象のファイル
        'resources/**/*',
    ],
    watchOptions: {
        usePolling: true,
        interval: 500,
      },
    })

自前のdocker環境用の書き方だけどざっくりこんな感じです。
resources配下のファイルを変更した際に画面が自動reloadされます。
bladeの変更がリロードなしで即反映されるので開発が捗る捗る。

UglifyJSとは

JavaScriptのコードを圧縮、軽量化(minify)したり難読化するためのツールです。
Laravel-mixの場合、コマンドによってminifyされるか否かが決まります。

npm run dev ⇒ minifyされない
npm run prod ⇒ minifyされる

    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    }