laravel-mixでnpm run watchしたら無限ループに陥ったので対処したこと

何気なくsassを書き直したら、npm run watchしてるのが無限ループしてた…

原因は画像のタイムスタンプ？

原因を探ってみると、

header {
    background-image: url("../images/icon_header.png");
}

が原因っぽい。

試しに、npm run prodしてみると、無事にコンパイルされて

  DONE  Compiled successfully in 24206ms                                                                   2:45:32 AM 

                                                    Asset       Size  Chunks                    Chunk Names 
                                             /css/app.css  724 bytes       1  [emitted]         /js/user
  images/icon_header.png?5154d06ae582f6e2548c6d920674da59   1.04 KiB          [emitted] 

とか出る。images/icon_header.png のタイムスタンプ見ると

なるほど、sassコンパイルする時に画像も変更するらしい。変更するんだけど、

$ md5sum ~/resources/images/icon_header.png ~/public/images/icon_header.png
5154d06ae582f6e2548c6d920674da59  ~/resources/images/icon_header.png
5154d06ae582f6e2548c6d920674da59  ~/public/images/icon_header.png

という感じでファイル自体は変更してなさそう。

対応方法

この機能をOFFにしてしまえばいいっぽい。

直接的な対応方法

laravel-mixのオプションでこの機能をOFFにするには

mix.options({
  processCssUrls: false
})

とする。

…なんだけど、これをOFFにするのはrun prodする時だけで良いので

const is_prod = mix.inProduction() ? true : false;
mix.webpackConfig({
  devtool: is_prod ? "" : "inline-source-map",
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': __dirname + '/resources/js'
    }
  },
}).options({
  processCssUrls: is_prod
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css/')

…ということで、watchしなければ問題ないので、productionコンパイルの時だけは聞くようにした