前提・実現したいこと
webpackを使用し,node.js製のアプリ(サーバー側)のコードを一つにまとめる機能を構築しています。
発生している問題・エラーメッセージ
アプリ内のディレクトリ構造
Explorer
1app 2┣ modules 3┃ ┣ ○○○○○.js 4┃ ︙ 5┃ ┗ ×××××.js 6┃ 7┣━ node_modules 8︙ 9┣━ config.json 10︙ 11┣━ 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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。