アプリケーションのパスが変更された時にwebpackのfile-loaderがファイルパスの先頭にスラッシュを付けないので下部のディレクトリを見に行って404になってしまう問題の解決法

環境

  • electron
  • webpack
  • babel-loader
  • url-loader
  • file-loader
  • react-router

問題

importrequireでurl-loaderのfallbackであるfile-loaderが出力するパスの先頭にはデフォルトではスラッシュが付いていません.

よってReact Routerなどを使って下部のディレクトリ/foo/に移動した際.ルートに置いてあるbar.pngファイルを読みに行く時.本来/bar.pngにアクセスして欲しいところ,/foo/bar.pngを読みに行ってしまい404エラーになります.

私が休日の内に取られていた対策法

/${require('bar.png')}のように全てのrequireに/を追加していました.つらい.

設定を変更して解決

調べた結果webpack.config.jsloaderspublicPath: '/'を書けば自動的にルートにスラッシュが追加されることがわかりました.

これにて一見落着なのですが,何故最初からこうなっていないのかわかりません.普通絶対パスで参照する時(useRelativePathfalseになっている時)は先頭にスラッシュを付けて欲しいと思うのですが.issueを見ると何か理由がありそうですが,英語弱者のためあまりわからず…

このエントリーをはてなブックマークに追加 fb-like g-plusone pocket