Наблюдение и WatchOptions

Webpack может следить за файлами и перекомпилировать их при изменении. Эта страница объясняет, как это включить, и несколько настроек, которые можно изменить, если наблюдение не работает должным образом.

наблюдение

boolean = false

Включить режим наблюдения. Это означает, что после начальной сборки webpack будет продолжать следить за изменениями в любых результирующих файлах.

webpack.config.js

module.exports = {
  //...
  watch: true,
};

watchOptions

object

Набор опций для настройки режима наблюдения:

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 200,
    poll: 1000,
  },
};

watchOptions.aggregateTimeout

number = 20

Добавить задержку перед пересборкой после первого изменения файла. Это позволяет webpack объединить все другие изменения, сделанные в этот период, в одну пересборку. Укажите значение в миллисекундах:

module.exports = {
  //...
  watchOptions: {
    aggregateTimeout: 600,
  },
};

watchOptions.ignored

RegExp string [string]

Для некоторых систем наблюдение за многими файлами может привести к высокому потреблению процессора или памяти. Можно исключить огромную папку, например, node_modules, используя регулярное выражение:

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/,
  },
};

В качестве альтернативы можно использовать шаблон glob:

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: '**/node_modules',
  },
};

Также можно использовать несколько шаблонов glob:

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    ignored: ['**/files/**/*.js', '**/node_modules'],
  },
};

Кроме того, можно указать абсолютный путь:

const path = require('path');
module.exports = {
  //...
  watchOptions: {
    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
  },
};

При использовании шаблонов glob мы преобразуем их в регулярные выражения с помощью glob-to-regexp, поэтому убедитесь, что вы знакомы с ним перед использованием шаблонов glob для watchOptions.ignored.

watchOptions.poll

boolean = false number

Включить опрос, передав true, что установит значение интервала опроса по умолчанию до 5007, или задав интервал опроса в миллисекундах:

webpack.config.js

module.exports = {
  //...
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
};

watchOptions.followSymlinks

Следить за символическими ссылками при поиске файла. Обычно это не требуется, так как webpack уже разрешает символические ссылки с помощью resolve.symlinks.

• Тип: boolean

• Пример:

  module.exports = {
    //...
    watchOptions: {
      followSymlinks: true,
    },
  };

watchOptions.stdin

Прекратить наблюдение, когда поток stdin завершен.

• Тип: boolean

• Пример:

  module.exports = {
    //...
    watchOptions: {
      stdin: true,
    },
  };

Устранение неполадок

Если у вас возникают проблемы, см. следующие заметки. Есть много причин, по которым webpack может пропустить изменение файла.

Изменения видны, но не обрабатываются

Убедитесь, что webpack не получает уведомления о изменениях, запустив webpack с флагом --progress. Если прогресс отображается при сохранении, но файлы не выводятся, скорее всего, проблема в конфигурации, а не в наблюдении за файлами.

webpack --watch --progress

Недостаточно наблюдателей

Убедитесь, что у вас достаточно доступных наблюдателей в вашей системе. Если это значение слишком низкое, наблюдатель файлов в 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

На некоторых машинах Vim предварительно настроен с параметром backupcopy установленным в значение auto. Это может вызвать проблемы с механизмом наблюдения за файлами системы. Изменение этого параметра на yes гарантирует, что копия файла будет создана, а оригинальный файл перезаписан при сохранении.

:set backupcopy=yes

Сохранение в WebStorm

При использовании IDE 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).