webpack 4でJavaScriptソースをビルドすると__dirnameが/になってしまう問題の解決法がわからない

やっていた作業

今書いているElectronアプリはmainプロセス側はBabelもTypeScriptもFlowも使っていない生JSで書かれていました.

生JSというのも問題ですが,rendererプロセス側ではBabelを使っていたので,mainプロセスとrendererプロセスでコードを共有できず,同じコードがコピペして増えるという悪夢が発生していました.

私はこれを解決すべく,mainプロセス側もBabelとwebpackを通すようにコードを変更していました.

webpackの設定ファイルを2つに分けて,renderer側ではこれまでと引き続きwebpack-dev-serverを使い,main側ではwebpack --watchdistにコンパイルしたコードを吐き出すようにして,起動自体はするようになりました.

問題

webpackでビルドすると,グローバル変数__dirname/になってしまう問題に遭遇しました.

これのせいで__dirnameに依存する動作が全て動かなくなりました.

例えばDevtronのインストールや,ログファイルの書き出しのためのディレクトリ作成などです.

Devtronのコードを直接書き換えて__dirnameを使っているところをハードコーディングして期待する値に書き換えたら動いたので__dirnameの値が/になってしまうのが原因なのは確実です.

__dirname returns '/' when js file is built with webpack · Issue #1599 · webpack/webpackによるとwebpack.config.jsに以下のようにしてnode.__dirnameを値が何でも良いので設定すれば良いらしいです.

そのようにしました.

  node: {
    __dirname: false,
  }

解決しませんでした.

__dirname not in relation to original location · Issue #4303 · webpack/webpackはcloseされないまま現在進行形で扱われているままです.

解決策

わからない.issueには「2015年から治っていない」とか書かれています.誰か助けてください.

それとも__dirnameはES Moduleで消滅するから放置されているのでしょうか.

webpack 3にしたら解決しました

webpack@3.11.0webpack-dev-server@2.11.2を使って,node: {__dirname: true}と記述してみたら,正常に動作しました.

webpack 4ではGitHubのissueに書かれているworkaroundは動かなくなったみたいですね.

ひとまずwebpack 3で動作するようなったのは良いのですが,いつかはwebpack 4にアップデートしないといけないので,これをどうするかは悩みどころですね.

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