Edited at

Vue.jsユーザーがまとめるLaravel Mixの要点とカスタマイズ方法


導入

私は1年以上Vue.jsを仕事で愛用しており、それなりにVue.jsについてやそれに関連してwebpackについての知見はたまってきているつもりでした。そんな私がLaravel-Mixを利用したプロジェクトに参加し、がっつりカスタマイズするミッションにぶち当たったなかで得たLaravel-Mixとはなにか、カスタマイズにあたっての方法はなにかをまとめたいと思います。

webpack/Vue.jsに関してはそれなりに知っている前提で、PHP/Laravelに関してはほぼ知識のない状態でのスタートでした


Laravel-mixって?

webpackの設定部分を記述することなく、


  • Babelトランスパイルならmix.js()

  • .vueのコンパイルもmix.js()

  • TypeScriptならmix.ts()

  • メタCSSならmix.sass()、mix.less()、mix.stylus()

それぞれの引数にファイルのパスを渡すだけです。

webpackの設定を自前で作ったことのある人ならこのシンプルな記述で済むのはなかなか魅力かと思います。


その他、用意されているメソッド

その他にもwebpackでよく使われる設定はAPIとして用意されており、使い方も基本ファイルパスを渡すだけです。


  • 共通コード分割 mix.extract('vue', 'element') 引数に指定したモジュールはvendar.jsとして別ファイルでバンドルされます。

  • バージョンの付与 mix.version() チェーンメソッドで指定した.js().sass()のあとに呼び出すことで?#xxxがソースパスに付与されます。

  • ファイルのコピー mix.copy(from, to) fromで指定したファイルをtoへそのままコピーします。*も使用可。

その他にも、グローバルにモジュールを定義する.autoload()、コードを最小化する.minify()など通常のプロジェクトで使うベーシックなものは揃っています。


それでもカスタマイズする必要がある場合