導入
私は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()など通常のプロジェクトで使うベーシックなものは揃っています。