質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

解決済

1回答

2120閲覧

webpack時の__dirnameのパス変換について

退会済みユーザー

退会済みユーザー

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

0クリップ

投稿2022/02/20 03:16

前提・実現したいこと

webpackを使用し,node.js製のアプリ(サーバー側)のコードを一つにまとめる機能を構築しています。

発生している問題・エラーメッセージ

アプリ内のディレクトリ構造

Explorer

1app 2┣ modules 3┃ ┣ ○○○○○.js 4┃ ︙ 5┃ ┗ ×××××.js 67┣━ node_modules 89┣━ config.json 1011┣━ server_bundle.js (webpackで生成されるファイル) 12┣━ server.js (modulesフォルダ内のファイルを読み込んでwebpackに認識させてもらうようリンクさせている) 13┗━ webpack.config.js

例えば,fsモジュールを利用して app/modules/○○○○○.js から app/config.json を 読み込む際は

js

1const fs = require("fs"); 2 3// 普通は __dirname = "(略)/app/modules" 4const config = JSON.parse(fs.readFileSync(`${__dirname}/../config.json`, "utf-8"));

と相対的に書くわけですが,webpackを利用して server_bundle.js を生成し,実行すると「そのパスにファイルは存在しない(ENOENT: no such file or directory, open)」と怒られてしまいます。

node ./server.js を実行すると怒られないので「パスが原因なのかもしれない」と思い,server_bundle.js の中身を見ると __dirname がそのままで生成されていました。
このファイルは app ディレクトリの直下にあるので,そこを基準として相対的に見たら当然ファイルなど存在しないのですぐ理解できました。

よって,webpackの設定がこの問題を引き起こしているということなので,あるディレクトリにあるファイルから別のディレクトリにあるファイルを相対パスを利用して読み込む際の __dirname をwebpack時に適切なパスに変換してくれる設定 について検索しましたが,なかなか対処できる方法が見つからないので質問させていただきました。

一応 webpack.config.js の内容も記載しておきます。

webpack.config.js

javascript

1const path = require("path"); 2const webpackNodeExternals = require("webpack-node-externals"); 3 4module.exports = { 5 "mode": "production", 6 "entry": "./server.js", 7 "target": "node", 8 "output": { 9 "path": path.join(__dirname), 10 "filename": "./server_bundle.js" 11 }, 12 "externals": [ 13 webpackNodeExternals() 14 ] 15};

補足情報(FW/ツールのバージョンなど)

console

1npx webpack -v 2 3webpack: 5.69.1 4webpack-cli: 4.9.2 5webpack-dev-server not installed

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

webpack設定での解決策が見つからないので自分でコードを作って解決しようと試みましたが

js

1const path = require("path"); 2 3const newPath = `${__dirname}/${path.relative(__dirname, /*ディレクトリのパス*/)}`;

こんな感じのパス設定することでうまくいきました(コードが少し気持ち悪いですが...)
やはりこれを複数回入力するとなると...一々めんどくさいので設定でなんとかしたかったものですね。

投稿2022/02/20 05:11

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問