環境

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

問題

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

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

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

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

設定を変更して解決

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

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

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

解決してなかった

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

解決しました

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

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