webpack-dev-serverでtypescript, eslintを使ってコンパイルすると無限ループになる時の対処

webpack-dev-serverでconfigを整理した時にやったミスに気付かず1日悩んだのでメモ。

環境

webpack-dev-server 3.3.0
webpack 4.29.6
node 11.3.0
npm 6.7.0
typescript 3.4.2
ts-loader 5.3.3

環境ってどこまで書けば良いのやら。。。

問題

typescriptをwebpackでコンパイル & eslintで構文チェックなどをやるとdevserverでのみ

ℹ ｢wdm｣: Compiled successfully.
ℹ ｢wdm｣: Compiling...

となってコンパイルが終わらないうえ^Cで終了もできないという現象

結論

ts-loader
↓
eslint
となっているのを
eslint
↓
ts-loader
にすると治った

格闘

stackoverflowなどを回ってもなかなか情報がない
↓
ひたすらプラグインをon/offしてみる
↓
治るどころかプロセスが増える
↓
消す
↓
https://qiita.com/riversun/items/d27f6d3ab7aaa119deab
この記事を見てメモリ上にデータがあるということを知る
↓
メモリ上にあるなら(devserverなら)意味ない物をdevserverならoff、でなければonという形にした
ここでeslintの存在を思い出す(重要)
↓
eslintのfixオプションをoffにして見る
↓
大量のエラー！
(インデント関係でした)
↓
不思議に思ってconfigを眺める
↓
_もしかしてtscのコンパイル後の結果のインデントが元のファイルに沿ってなかったんじゃね？_と思ってeslintとts-loaderを入れ替える
↓
エラーが出なくなる

経緯

configのrolesを見直した時になんとなくeslintをts-loaderの後に記載したのが原因
もともとenforce: trueと書いてあったが意味がわからず消してしまった
次から帰る前にドキュメント読もう。