webpack.configでハマった話

TL;DR

webpackでエラーが出たら--display-error-detailsを付けて確認する


webpack-dev-serverwebpackを実行すると、延々と以下の様なエラーが出ました。このエラー自体は汎用というか、特定の原因を指すものではなく、ぐぐっても色々な原因、対応方法が出るので2時間くらいハマりました。

% webpack --display-error-details

...

ERROR in multi app  
Module not found: Error: Cannot resolve 'file' or 'directory' /.../app in /...  
 @ multi app

結論としては、webpack.config.jsresolve.extensionsの値の指定方法が原因でした。

resolve: {  
  extensions: ['', 'js', 'jsx']
}

正しくは.を付けなければなりません。

resolve: {  
  extensions: ['', '.js', '.jsx']
}

--display-error-detailsオプションを付けてwebpackを実行すると、以下の様にエラーの詳細が表示されるようになります。

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /.../app in /...  
resolve file  
  /.../app is not a file
  /.../appjs doesn't exist
  /.../appjsx doesn't exist

ファイルに.が無く、appjsのように表示されるので、原因に気付けました。