لماذا استخدم __dirname مع path.resolve في تكوين webpack؟

في العادة __dirname تقوم بارجاع رابط المجلد لل module  دعنا نلقي نظرة على بعض الأكواد التي تستخدم __dirname.

//getDirName.js
function getDirName() {
  return __dirname;
}

module.exports = getDirName;

//app.js
const getDirName = require('./getDirName');

console.log(getDirName());

هذا ما يبدو عليه الإخراج بدون استخدام webpack

/users/usename/folder.../webapckproject

لكن عند استخدام webapck

//getDirName.js
function getDirName() {
  return __dirname;
}

export default getDirName;

//app.js
import getDirName from './getDirName';

console.log(getDirName());

الناتج يصبح

/

لاحظ كيف يختلف __dirname اعتمادًا على ما إذا كنت تستخدم webapck أم لا. وذلك لأن webapck  تستبدل __dirname بـ /. إنه أمر افتراضي غريب وقد يتسبب في بعض الأخطاء التي يصعب العثور عليها كما يقوم بهذا أيضًا باستخدام __filename.
لجعل __dirname يعمل بنفس الطريقة عند تجميعه بواسطة webapck  يمكننا تحديث تكوين webpack الخاص بنا على هذا النحو.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, './app.js'),
  output: {
    path: path.join(__dirname),
    filename: 'bundle.js',
  },
  node: {
    __dirname: false,
  },
};

صحيح لا حاجة لإستخدام ال_dirname في هذا السيناريو, ولكن في مواقف أخرى ستحتاجها, حيث أن ال_dirname تقوم بإرجاع مسار ملف الجافاسكريبت الموجود فيه الشفرة البرمجية, بينما path.resolve() ستقوم بإرجاع مسار المجلد الحالي , في موقفك هنا فإن كﻻ المسارين يعطيان نفس العنوان ولكن في مواقف أخرى قد يختلف كل مسار عن الثاني, فمثلاً من الممكن أن يتم تغيير مسار المجلد الحالي , مثلاً إن قمت بتنفيذ الشفرة

processs.chdir(./example

في برنامجك ستجد أن المجلد الحالي تغير مساره وبالتالي ستحتاج إلى _dirname