Laravel Mix 覚書

使うけど、使い方を間違えてた部分がちらほらあったので、それの覚書。

laravel-mix のバージョンは ^6.0.6 を想定し、Laravel 上では mix ヘルパーを使ってJSを読み込んでいます。（Blade のテンプレートで <script tyep="application/javascript" src="{{ mix('js/app.js') }}"></script> といった感じ。）

とりあえず minify にすることを「コンパイル」と、便宜上ここでは言います。

develop/prod コンパイル

npm run watch で編集中のファイルもコンパイルをしてくれ、 npm run prod で本番用のコンパイルをしてくれます。

そして webpack.min.js では　if (mix.inProduction()) といった条件分岐で分別をする事ができます。

console.log/console.debug を削除

mix.options に、下記のようなオプションを加えるとうまくいきます。

  mix.options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
    },
  });

jsファイルのキャッシュコントロール

mix.version(); を加え、Blade 側で mix('js/app.js') とやれば /js/app.js?<hash> という形に展開されます。 <hash> はproduction コンパイルをする度に変わる値です。これにより、変更の度にブラウザがそれらのファイルを都度読みに行きます。

結果

結果的に個人的には下記のような webpack.min.js を使ってます。

const mix = require('laravel-mix');
if (mix.inProduction()) {
  // console.debug だけをプロダクションコンパイルのときは消す
  mix.options({
    terser: {
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
    },
  });
} else {
  mix.webpackConfig({
    devtool: 'source-map',
  });
  mix.sourceMaps();
}

mix.
	sass('resources/assets/sass/bootstrap.scss', 'public/assets/css/bootstrap.css')
    js('resources/js/app.js', 'public/js/app.js');

if (mix.inProduction())
  mix.version();