このエントリーをはてなブックマークに追加 hatena-bookmark fb-like g-plusone
line-it
pocket
  • 作成日時:
  • 更新日時:

アプリケーションのパスが変更された時に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: '/'を書けば自動的にルートにスラッシュが追加されることがわかりました.

      {
        test: /\.png$/,
        loader: 'url-loader',
        options: {
          limit: 8192,
          publicPath: '/',
        },
      },

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

解決してなかった

Electronのdevelopmentモードだとこれで問題ないのですが,productionビルドでpublicPathを/にしていると正常に読み込まれないことが分かりました.

解決しました

原因がわかって解決しました.

Electronのproduction環境でasarにある画像などのリソースがnet::ERR_FILE_NOT_FOUNDで読み込めないのはBrowserRouterが原因でした - ncaq

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