Просмотр и параметры просмотра

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

watch

boolean = false

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

webpack.config.js

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

В webpack-dev-server и webpack-dev-middleware режим отслеживания включён по умолчанию.

watchOptions

object

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

webpack.config.js

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

watchOptions.aggregateTimeout

number = 300

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

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

watchOptions.ignored

RegExp anymatch

Для некоторых систем отслеживание множества файловых систем может привести к большому использованию ЦП или памяти. Возможно исключить большую папку, например, node_modules:

webpack.config.js

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

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

webpack.config.js

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

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

watchOptions.poll

boolean = false number

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

webpack.config.js

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

Если отслеживание не работает, попробуйте эту опцию. Отслеживание не работает с NFS и машинами в VirtualBox.

info-verbosity

string: 'none' | 'info' | 'verbose'

Управляет удобочитаемостью сообщений жизненного цикла, например, логирования Started watching files.... Установка info-verbosity в verbose также выведет сообщения в консоль в начале и в конце инкрементной сборки. info-verbosity установлено по умолчанию в info.

webpack --watch --info-verbosity verbose

Отладка

Если у вас возникли проблемы, см. следующие заметки. Есть много причин, по которым 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.

Ошибка macOS fsevents

В 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 вы можете обнаружить, что сохранение изменённых файлов не запускает наблюдатель так, как ожидается. Попробуйте отключить опцию safe write в настройках, которая определяет, сохраняются ли файлы в временное местоположение перед перезаписью оригиналов: снимите флажок File > {Settings|Preferences} > Appearance & Behavior > System Settings > Use "safe write" (save changes to a temporary file first).