webpack --watch не компілює змінені файли

Я спробував запустити, webpack --watchі після редагування своїх файлів JS це не викликає автоматичної перекомпіляції.

Я спробував перевстановити webpackuse, npm uninstallале він все ще не працює.

Якісь ідеї?

FYI: здається , OS X може мати папку зіпсована і більше не посилу fsevents(який watchpack/chokidar / Finder використовує) для себе та будь-яких дочірніх папок. Я не можу бути впевнений, що це те, що трапилося з вами, але це дуже засмучувало мене і колегу.

Нам вдалося перейменувати пошкоджену батьківську папку, а потім спостерігати за подіями, які негайно пройшли, як очікувалося. Дивіться цю публікацію в блозі для отримання додаткової інформації: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

Рекомендовані виправлення з наведеного вище посилання:

• перезавантаження комп'ютера
• перевірка диска та відновлення дозволів за допомогою Disk Utility
• додавання папки до списку конфіденційності Spotlight (список папок не індексується), а потім видалення з неї, ефективно примушуючи переосмислювати
• перейменування папки, а потім, можливо, перейменування назад
• повторне створення папки та переміщення старого вмісту назад у неї

Перші два не працювали для нас, не випробовували пропозицію Spotlight, і повторне створення не виявилося необхідним.

Нам вдалося знайти кореневу папку проблеми, відкривши Finder і створивши файли в кожній наступній батьківській папці, доки одна не з’явилася одразу (оскільки Finder також буде вражений цією помилкою). Виною тому є сама коренева папка, яка не оновлюється. Ми просто mvзробили це і mvповернули йому початкову назву, а потім спостерігач запрацював.

Не уявляю, що спричиняє корупцію, але я просто радий виправити це.

Якщо ваш код не перекомпілюється, спробуйте збільшити кількість спостерігачів (в Ubuntu):

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Джерело: https://webpack.github.io/docs/troubleshooting.html

Додавання наступного коду до мого конфігураційного файлу webpack вирішило проблему для мене, сподіваюся, це допоможе. Не забудьте проігнорувати папку node_modules, оскільки це призведе до зниження продуктивності HMR (гаряча заміна модуля):

watchOptions: {
  poll: true,
  ignored: /node_modules/
}

У мене була ця проблема під час роботи з WebStorm.

Вимкнення налаштувань -> Налаштування системи -> "безпечний запис" це вирішило для мене.

Знайшов рекомендацію робити це у: Усунення несправностей WebPack

Просто щоб додати до можливих рішень: у мене була папка проекту всередині папки Dropbox, її переміщення вирішило проблему для мене. (ОС X)

Моє питання - чутливість до регістру папок. У моїх кодових викликах require () були всі назви малих літер, АЛЕ насправді каталоги мали велику літеру в них. Я перейменував усі свої каталоги на малі регістри, і перегляд веб-пакетів працював моментально.

Одне питання полягає в тому, що якщо ваші назви шляхів не є абсолютними, то подібні речі відбуватимуться. Я випадково встановити resolve.rootна ./замість , __dirnameі це змусило мене витрачати багато часу видалення і повторного створення файлів , як вищий за мене , хлопці.

Якщо зміна fs.inotify.max_user_watches як вказівника Сезара все-таки не працює, спробуйте використовувати опитування замість власних спостерігачів, створивши свій сценарій, як показано в документації, або запустивши веб-пакет з --watch --watch-pollопціями.

Зверніть увагу, що якщо ви запускаєте веб-пакет на віртуальній машині (Vagrant / Virtualbox) і ви змінюєте свої файли на хост-платформі, оновлення файлів у спільній папці може не викликати інотифікацію в Ubuntu. Це призведе до того, що зміни не будуть сприйняті веб-пакетом.

див .: Квиток Virtualbox # 10660

У моєму випадку редагування та збереження файлу в de guest (in vi) запустило webpack. Відредагувавши його на хості (у PhpStorm, Блокноті чи будь-якому іншому додатку), не запускайте веб-пакет, що б я не робив.

Я вирішив це за допомогою vagrant-fsnotify .

Працюй у мене в садибі Ларавеля

--watch --watch-poll

Оновлення: видалення всього каталогу та git клонування знову з repo виправляє мою проблему.

Якщо ви використовуєте Vim, спробуйте встановити для резервної копії значення так, а не автоматичне значення за замовчуванням. В іншому випадку Vim іноді перейменовує оригінальний файл і створює новий, який псує годинник webpack:

https://github.com/webpack/webpack/issues/781

Просто додайте це до своїх налаштувань vim, якщо це так:

встановити резервну копію = так

У мене була та ж проблема у файлі .vue. Коли сервер перезавантажився, все працювало нормально, але при наступному збереженні він більше не перекомпілювався. Проблема полягала у шляху до файлу імпорту, який написав велику літеру. Дуже важко зрозуміти цю проблему, оскільки все працює при перезавантаженні сервера. Перевірте випадок ваших шляхів.

Це не було для мене перекомпіляцією, але тоді я зрозумів / згадав, що webpack спостерігає графік залежності, а не лише папку (або файли). Звичайно, файли, які я міняв, ще не були частиною цього графіка.

Для мене проблемою було створення папок та файлів у VS Code. Для виправлення я повторно клонував своє репо та цього разу створив нові папки та файли через командний рядок замість Коду. Я думаю, що Code чомусь псував файли. Я бачив, що додаток щойно оновився, тому, можливо, це нова помилка.

У мене не було подібних проблем: ні вебпакет, ні згущення в режимі перегляду посуду, де відображалися внесені нами зміни. Я з’ясував, що це в основному моя вина, оскільки я міняв модуль (файл .tsx), який ще ніде не імпортувався в програмі (наприклад, App.ts, який є точкою входу), і я очікував, що інструменти побудови повідомляють про помилки. зроблені там.

Я вирішив проблему шляхом пошуку помилки використання великих літер у шляху імпорту. Папка у файловій системі мала малу літеру, шлях імпорту - верхній регістр. Все скомпільовано чудово, тож це був лише веб-пакет, який включає в себе годинник.

Також виникла ця проблема у віртуальній машині VirtualBox (5.2.18) Ubuntu (18.04) із використанням Vagrant (2.1.15) із синхронізацією rsync. Раптом перша збірка працює чудово, але Webpack не враховує зміни згодом, навіть з fs.inotify.max_user_watches=524288набором. Додавання poll: trueв конфігурації Webpack також не допомогло.

vagrant-notify-forwarderПрацював лише (vagrant-fsnotify з якихось причин цього не робив), але потім відновлення відбулося занадто швидко після збереження файлу на хості, і я припускаю, що rsync не вистачило часу, щоб закінчити своє завдання (можливо, через кількість синхронізованих каталогів у моєму файлі Vagrant?).

Нарешті я змусив годинник знову працювати, також збільшивши aggregateTimeoutв моєму конфігурації Webpack:

module.exports = {
  watch: true,
  watchOptions: {
    aggregateTimeout: 10000
  },
  ...
}

Якщо це рішення працює для вас, спробуйте знизити це значення ще раз, інакше доведеться чекати 10 секунд, поки збірка не перезапуститься кожного разу, коли ви натиснете кнопку збереження. Значення за замовчуванням - 300 мс .

У мене те саме питання. І я помічаю, що це не компіляція, оскільки моя папка містить якийсь символ (*). І використання старого плагіна спостерігача, здається, вирішує проблему. Додайте цей рядок до конфігураційного файлу веб-пакета.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Для мене видалення node_modulesта повторне встановлення npm або yarn для встановлення всіх пакетів вирішило проблему

Що було причиною в моєму випадку:

Здається, значення: max_user_watches in /proc/sys/fs/inotify/max_user_watches впливає на веб-пакет

Щоб перевірити ваше фактичне значення

$cat /proc/sys/fs/inotify/max_user_watches
16384

16384 був у моєму випадку, і його все ще було недостатньо.

Я пробував різні типи рішень, такі як:

$ echo fs.inotify.max_user_watches=100000 | sudo tee -a /etc/sysctl.conf
$ sudo sysctl -p

Але, здається, навіть якби я змінив значення, коли я перезапустив свій ПК, воно повернеться до типового 16384.

РІШЕННЯ, якщо у вас ОС Linux (у моєму випадку у мене є Манджаро):

Створіть файл:

sudo nano /etc/sysctl.d/90-override.conf

І заповнити його:

fs.inotify.max_user_watches=200000

Здається, 200000 мені вистачає.

Після того, як ви створили файл і додали значення, просто перезавантажте ПК, і у вас все буде добре.

Найпростішим рішенням для MacOS є наступне:

Відкрийте два вікна терміналу в одному каталозі, в якому знаходиться ваш проект.

У першому вікні терміналу запустіть: webpack --watch

У другому вікні терміналу запустіть: webpack-dev-server

Я випробував безліч можливих рішень, і це видається найбільш надійним

Можливе рішення: зміна контексту до каталогу додатків.

У мене були всі конфігураційні файли webpack у підпапці:

components/
webpack/
 development.js
app.js

В webpack/development.js, набір context: path.join(__dirname, '../')вирішив мою проблему.

Спробувавши кілька стратегій для вирішення цієї проблеми, я в кінцевому підсумку просто здався, але потім, вирішуючи інше питання, я спробував знову, і раптом --watchпрапор нарешті запрацював.

Чесно кажучи, я не знаю, що конкретно змусило його працювати, але після виконання наступних кроків він щойно почав працювати:

1. Install most recent gcc version
$ sudo port install gcc48
$ sudo port select --set gcc mp-gcc48

2. Install most recent clang version
$ sudo port install clang-3.6
$ sudo port select --set clang mp-clang-3.6

3. Export variables holding the patch to C and C++ compiler
$ export CC=/opt/local/bin/clang
$ export CXX=/opt/local/bin/clang++

Могло статися так, що під час встановлення цих пакунків якась залежність просто додала відсутній фрагмент головоломки, хто знає ...

Сподіваюся, це допоможе тим, хто бореться за те, щоб це працювало.

Я додаю ще одну відповідь, оскільки вважаю, що це найкраще рішення на сьогодні. Я використовую його щодня, і він хитається! Просто встановіть цю бібліотеку:

https://github.com/gajus/write-file-webpack-plugin

Опис: Змушує програму webpack-dev-server записувати файли пакетів у файлову систему.

Як встановити:

npm install write-file-webpack-plugin --save-dev

Спробуйте перейти --watchна-d --watch

працював у мене

Якщо це раптом сталося у вашому проекті, це може вирішити проблему.

Можливо, якимось чином файли, які відстежували зміни вашого проекту, які веб-пакет шукає, були пошкоджені. Ви можете створити їх знову, просто виконуючи прості дії.

1. вийти зі свого проекту. ($: кд ..)
2. перемістити ваш проект в інший каталог ($: mv {projectName} {newName})
3. перейти в новий каталог ($: cd {newName})
4. запустіть сервер і перевірте, чи не перезавантажується він при кожній зміні файлу (він повинен працювати в більшості випадків, оскільки зараз webpack створює нові файли для спостереження за змінами)
5. вийди з dir ($: cd ..)
6. повернути його до початкової назви ($: mv {newName} {projectNam}) Це спрацювало для мене ............

Я зіткнувся з цим запитанням, коли у мене виникла подібна проблема - виявилося, що webpack не проводив повторне впорядкування, навіть під час запуску webpack --config.

Я навіть видалив bundle.js, і веб-сторінка все ще відображалася, як і до моїх редагувань.

Для тих з вас, хто стикається з цією ж проблемою, я нарешті зробив опцію `` порожній кеш і жорстке перезавантаження '' в chrome (клацніть правою кнопкою миші кнопку перезавантаження з відкритими інструментами розробки), і це зробило цей трюк

Я зустрічав ту ж проблему, пробував багато речей, нарешті, Chrome Clear Browsing Data на Mac працював у мене.

Ці модулі були встановлені:

"браузер-синхронізація": "^ 2.26.7",

"browser-sync-webpack-plugin": "^ 2.2.2",

"webpack": "^ 4.41.2",

"webpack-cli": "^ 3.3.9"

Проблема полягала в розбіжності між файлами .js та .ts. Чому?

Під час побудови проекту Visual Studio компілює файли машинопису в .js та .js.map. Це абсолютно непотрібно, оскільки webpack також обробляє файли машинопису (з awesome-typecript-loader). Під час редагування файлів .tsx componet у Visual Studio Code або з відключеним compileOnSave опцією у tsconfig.json відредагований файл ts не перекомпілюється, і мій веб-пакет обробляє неактуальний файл .js.

Рішенням було вимкнути компіляцію файлів машинопису у Visual Studio при побудові проекту. Додайте

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

у PropertyGroup вашого .csproj.