Laravelのwebpack.mix.jsについて学びました。
自分への議事録としてまとめています。

追記：2017/11/17日

webpack.mix.jsと、webpack.config.jsの関係について調べました。
{{ mix(''}}について調べました

webpack.mix.jsとは

webpack.mix.jsファイルは 全アセットコンパイルのエントリポイントです。Webpackの軽い設定ラッパーだと考えてください。Mixタスクはアセットをどのようにコンパイルすべきかを正確に定義するため、チェーンでつなげます。

//基本形
mix.hogehoge(コンパイルされるファイル, 'コンパイル後のファイル');

Webpack設置をカスタマイズ

Webpack設置をすべてカスタマイズしたい場合は、node_modules/laravel-mix/setup/webpack.config.js をプロジェクトのルートディレクトリへコピーしてください。
コピー？要するに新しくwebpack.config.js作ってそれを読み込んでねってこと？であってますか？？

次に、package.jsonファイル中の--config参照を全て新しくコピーした設定ファイルに変更します。

カスタマイズにこのアプローチを取る場合は、Mixのwebpack.config.jsに対するアップストリームの機能変更を自分でカスタマイズするファイルへマージする必要があります。

バージョン付け／キャッシュ対策

多くの開発者は古いコードが提供され続けないように、新しいアセットがブラウザにロードされるよう、タイムスタンプやユニークなトークンをコンパイル済みのアセットへサフィックスとして付加しています。Mixでは、versionメソッドを使用し、これを処理できます。

versionメソッドは自動的に全コンパイルファイルのファイル名へ一意のハッシュを追加し、キャッシュを更新できるようにします。

バージョン付けしたファイルを生成すると、皆さんは実際のファイル名がわからなくなります。
そのため、適切なハッシュ付きアセットをロードするために、ビュー中でLaravelのグローバルmix関数を使う必要があります。mix関数はハッシュ付きファイルの最新の名前を自動的に判定します。

CSSのコンパイル

LESS → CSS

//1ファイル
mix.less('resources/assets/less/app.less', 'public/css')

//複数ファイル
mix.less('resources/assets/less/app.less', 'public/css')
   .less('resources/assets/less/admin.less', 'public/css');

SASS → CSS

//1ファイル
mix.sass('resources/assets/sass/app.scss', 'public/css');

//Node-Sassプラグインオプションを第３引数に指定可能
mix.sass('resources/assets/sass/app.sass', 'public/css', {
    precision: 5
});

Stylus → CSS

1ファイル
mix.stylus('resources/assets/sass/app.styl', 'public/css');

//追加のStylusプラグインをインストールし、mix.stylus()の中で呼び出す
//最初にプラグインをインストールしておく必要がある。
mix.stylus('resources/assets/stylus/app.styl', 'public/css', {
    use: [
        require('rupture')()
    ]
});

PostCSS → CSS

//最初に、NPMにより希望のプラグインをインストールしておき、呼び出す。
//デフォルトでAutoprefixerが入っている。
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
        postCss: [
            require('postcss-css-variables')()
        ]
   });

Autoprefixer

普通のCSSを結合

//stylesメソッドを使う
mix.styles([
    'public/css/vendor/normalize.css',
    'public/css/vendor/videojs.css'
], 'public/css/all.css');

ソースマップ

・デフォルトでは無効
・ブラウザの開発ツール向けの追加デバッグ情報を提供

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

URL処理

スタイルシート中のurl()呼び出しをリライトして最適化。

.example {
    background: url('../images/example.png');
}
↓↓
.example {
  background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
}

url()リライトを停止することもできる
mix.sass('resources/assets/app/app.scss', 'public/css') .options({ processCssUrls: false });

JavaScriptの操作

MixはECMAScript 2015のコンパイル、モジュール結合、圧縮やシンプルなJavaScriptファイルの結合などを提供。設定をカスタマイズする必要は全く無く、全てがシームレス（よどみなく）に動作する。

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

これだけで下記4つの恩恵が受けられる。

ES2015記法
モジュール
.vueファイルのコンパイル
開発環境向けに圧縮

Webpackカスタム設定

Laravel Mixは、裏で事前に設定済みのwebpack.config.jsファイルを参照している。
このファイルを変更するときの方法は２種類。

カスタム設定のマージ
カスタム設定ファイル

ここは説明読んだだけじゃイメージしにくかったので、実際にやってみることにする。

ファイル／ディレクトリコピー

mix.copy(コピーされるファイル, コピー後のファイル);

//CSSをコピー
mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

//ディレクトリをコピー
mix.copyDirectory('assets/img', 'public/img');

一旦ココまで！！

引用：Laravel 5.4 アセットのコンパイル(Laravel Mix)

webpack.mix.js って何？追記：2017/11/17日