Watch and WatchOptions

يستطيع webpack أن يُراقب الملفّات ويعيد التصريف كلّما تغيّرت. وتشرح لك هذه الصفحة كيف تُفعِّل هذه الميزة، وبعض التعديلات الصغيرة التي قد تحتاج إليها إن لم تعمل المراقبة على ما يُرام.

watch

boolean = false

يُفعِّل وضع المراقبة. أي أنّ webpack، بعد بنائه الأوّل، سيظلّ يُراقب أيّ تغيّر يطرأ على الملفّات التي حلّلها.

webpack.config.js

export default {
  // ...
  watch: true,
};

watchOptions

object

مجموعة خيارات تُستعمَل لتطويع وضع المراقبة:

webpack.config.js

export default {
  // ...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

number = 20

يُضيف تأخيراً قبل إعادة البناء بعد أوّل تغيّر يطرأ على ملفّ. وذلك حتى يُتاح لـ webpack تجميع التغييرات الأخرى التي تقع خلال هذه المهلة في عملية بناء واحدة. تُمرَّر القيمة بالميلي ثانية:

export default {
  // ...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp string [string]

قد تستنزف مراقبة كثير من الملفّات قدراً ملحوظاً من المعالج أو الذاكرة في بعض الأنظمة. ويمكنك استثناء مجلَّد ضخم كـ node_modules بتعبير نمطي:

webpack.config.js

export default {
  // ...
  watchOptions: {
    ignored: /node_modules/,
  },
};

كما يمكنك استعمال نمط glob:

webpack.config.js

export default {
  // ...
  watchOptions: {
    ignored: "**/node_modules",
  },
};

أو حتى أنماط glob متعدّدة:

webpack.config.js

export default {
  // ...
  watchOptions: {
    ignored: ["**/files/**/*.js", "**/node_modules"],
  },
};

وفضلاً عن ذلك، تستطيع تحديد مسار مطلق:

import path from "node:path";
import { fileURLToPath } from "node:url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  // ...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, "./ignored-dir")],
  },
};

عند استعمال أنماط glob، فإننا نُحوِّلها إلى تعابير نمطية عبر glob-to-regexp، لذا تأكّد من إلمامك بها قبل أن تستعملها في watchOptions.ignored.

watchOptions.poll

boolean = false number

فعِّل الاستطلاع (polling) بتمرير true فيُضبط فاصل الاستطلاع الافتراضي على 5007، أو حدِّد فاصلاً مخصَّصاً بالميلي ثانية:

webpack.config.js

export default {
  // ...
  watchOptions: {
    poll: 1000, // افحص التغيّرات كلّ ثانية
  },
};

watchOptions.followSymlinks

تتبَّع الروابط الرمزية (symbolic links) أثناء البحث عن الملفّ. وهذا الخيار لا يُحتاج إليه عادةً، إذ أنّ webpack يُحلِّل هذه الروابط أصلاً عبر resolve.symlinks.

• النوع: boolean

• مثال:

  Copy

  export default {
    // ...
    watchOptions: {
      followSymlinks: true,
    },
  };

watchOptions.stdin

أوقف المراقبة عند انتهاء التيار stdin.

• النوع: boolean

• مثال:

  Copy

  export default {
    // ...
    watchOptions: {
      stdin: true,
    },
  };

استكشاف الأخطاء وحلّها

إن واجهتك أيّ مشكلات، فعُد إلى الملاحظات الآتية، إذ هناك أسباب عدّة قد تجعل webpack يُفوّت تغيّراً في ملفّ.

تغييرات يراها webpack لكنه لا يُعالجها

تأكّد من أنّ webpack يصله إشعار بالتغييرات، وذلك بتشغيله مع الراية --progress. فإن ظهر التقدّم عند الحفظ ولم يُخرج ملفّات، فالأرجح أنّ المشكلة في التخصيص لا في مراقبة الملفّات.

webpack --watch --progress

عدد الـ watchers لا يكفي

تأكّد من أنّ لديك عدداً كافياً من الـ watchers المتاحة في نظامك. فإن كانت القيمة منخفضة، لن يلاحظ webpack التغييرات:

cat /proc/sys/fs/inotify/max_user_watches

على مستخدمي Arch، أضف fs.inotify.max_user_watches=524288 إلى /etc/sysctl.d/99-sysctl.conf ثمّ شغِّل sysctl --system. وعلى مستخدمي Ubuntu (وربما غيرهم)، شغِّل: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

علّة fsevents على macOS

على macOS، قد تتلف بعض المجلَّدات في حالات معيّنة. اطّلع على هذه المقالة.

مسارات Windows

لمّا كان webpack ينتظر مسارات مطلقة في كثير من خيارات التخصيص مثل __dirname + '/app/folder'، فإنّ فاصل المسارات \ في Windows قد يُخلّ ببعض الوظائف.

استعمل الفواصل الصحيحة، أي path.resolve(__dirname, 'app/folder') أو path.join(__dirname, 'app', 'folder').

همة

في بعض الأجهزة، يكون Vim مضبوطاً مُسبقاً مع الخيار backupcopy على auto، وهذا قد يُسبِّب مشكلات مع آلية مراقبة الملفّات في النظام. فبتبديل هذا الخيار إلى yes تضمن إنشاء نسخة من الملفّ والكتابة فوق الأصلي عند الحفظ.

:set backupcopy=yes

الحفظ في WebStorm

عند استعمال بيئة JetBrains WebStorm، قد تجد أنّ حفظ الملفّات المُعدَّلة لا يُحرِّك المُراقب كما تتوقّع. جرِّب تعطيل خيار Back up files before saving في الإعدادات، وهو الخيار الذي يُحدِّد ما إذا كانت الملفّات تُحفظ في موقع مؤقَّت قبل الكتابة فوق الأصلي: ألغِ التأشير عن File > {Settings|Preferences} > Appearance & Behavior > System Settings > Back up files before saving. وفي بعض إصدارات WebStorm، قد يُسمَّى هذا الخيار Use "safe write" (save changes to a temporary file first).