webpack --watch değiştirilen dosyaları derlemiyor

Çalıştırmayı denedim webpack --watchve JS dosyalarımı düzenledikten sonra otomatik yeniden derlemeyi tetiklemiyor.

Ben yeniden denedim webpackkullanarak npm uninstallancak hala çalışmıyor.

Herhangi bir fikir?

Bilginize: OS X'in bir klasörü bozulmuş olabilir ve artık kendisi ve herhangi bir alt klasör için fsevents( watchpack/ chokidar/ Finder'ın kullandığı) göndermeyebilir . Sana olanın bu olduğundan emin olamıyorum ama benim ve bir meslektaşım için çok sinir bozucuydu.

Bozuk ana klasörü yeniden adlandırmayı başardık ve ardından olayların beklendiği gibi hemen gelmesini izledik. Daha fazla bilgi için bu blog gönderisine bakın: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

Yukarıdaki bağlantıdan önerilen düzeltmeler şunlardır:

• bilgisayarı yeniden başlatmak
• Disk İzlencesi aracılığıyla diski kontrol etme ve izinleri onarma
• Klasörü Spotlight gizlilik listesine eklemek (dizine eklenmeyecek klasörler listesi) ve ardından buradan kaldırarak etkili bir şekilde yeniden dizin oluşturmaya zorlamak
• klasörü yeniden adlandırmak ve ardından muhtemelen yeniden adlandırmak
• klasörü yeniden oluşturmak ve eski içeriği tekrar içine taşımak

İlk ikisi bizim için işe yaramadı, Spotlight önerisini denemedi ve yeniden oluşturma gerekli olmadı.

Finder'ı açarak ve her bir ardışık üst klasörde hemen bir tane görünene kadar dosyalar oluşturarak kök sorun klasörünü bulabildik (çünkü Finder da bu hatadan etkilenecektir). Güncellenmeyen en kök klasör suçludur. Biz sadece mv'o gün ve mv' geri orijinal isme d ve sonra izleyici çalıştı.

Yolsuzluğa neyin sebep olduğu hakkında hiçbir fikrim yok, ama bir çözüm bulduğuma sevindim.

Kodunuz yeniden derlenmiyorsa, izleyici sayısını artırmayı deneyin (Ubuntu'da):

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

Kaynak: https://webpack.github.io/docs/tramless.html

Aşağıdaki kodu web paketi yapılandırma dosyama eklemek sorunu benim için çözdü. Node_modules klasörünüzü görmezden gelmeyi unutmayın, çünkü bu, HMR (Sıcak Modül Değişimi) performansını düşürecektir:

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

WebStorm ile çalışırken bu sorunu yaşadım.

Ayarlar -> Sistem Ayarları -> "güvenli yazma" devre dışı bırakılması sorunu benim için çözdü.

Bunu yapmak için öneri buldum : WebPack Sorun Giderme

Olası çözümlere eklemek için: Proje klasörümü bir Dropbox klasörünün içinde tuttum, dışarı taşımak sorunu benim için çözdü. (OS X)

Klasör büyük / küçük harf duyarlılığı benim sorunumdu. Require () için kod çağrılarımın tümü küçük harfli yol adlarına sahipti ANCAK aslında dizinlerde büyük harf vardı. Tüm dizinleri küçük harf olarak yeniden adlandırdım ve web paketi izleme anında çalıştı.

Bir sorun, yol adlarınız mutlak değilse, bunun gibi şeylerin olacağıdır. Yanlışlıkla batmıştı resolve.rootiçin ./yerine __dirnameve bu kez silme üstümde çocuklar gibi yeniden yaratan dosyaları bir çok atık beni neden oldu.

Fs.inotify.max_user_watches'ı César'ın belirttiği gibi değiştirmek hala işe yaramıyorsa, komut dosyanızı belgelerde gösterildiği gibi oluşturarak veya --watch --watch-pollseçeneklerle web paketini çalıştırarak yerel izleyiciler yerine yoklamayı kullanmayı deneyin .

Bir sanal makine (Vagrant / Virtualbox) içinde web paketi çalıştırırsanız ve ana bilgisayar platformundaki dosyalarınızı değiştirirseniz, paylaşılan klasördeki dosya güncellemelerinin Ubuntu'da inotify'ı tetiklemeyebileceğini unutmayın. Bu, değişikliklerin web paketi tarafından alınmamasına neden olacaktır.

bkz: Virtualbox bileti # 10660

Benim durumumda, dosyayı de guest'e (vi'de) düzenlemek ve kaydetmek web paketini tetikledi. Ana bilgisayarda (PhpStorm, Not Defteri veya başka bir uygulamada) düzenlemek, yaptığım her ne olursa olsun web paketini TETİKLEMEZ.

Bunu vagrant-fsnotify kullanarak çözdüm .

Laravel Homestead'de benim için çalış

--watch --watch-poll

Güncellemeler: depodan tüm dizini ve git klonlamayı yeniden silmek sorunumu çözdü.

Vim kullanıyorsanız, varsayılan otomatik yerine yedekleme kopyasını evet olarak ayarlamayı denemelisiniz. Aksi takdirde Vim bazen orijinal dosyayı yeniden adlandırır ve yeni bir dosya oluşturur, bu da web paketi saatini bozar:

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

Böyle bir durumda bunu vim ayarlarınıza eklemeniz yeterlidir:

yedekleme kopyasını ayarla = evet

Bir .vue dosyasında aynı sorunu yaşıyordum. Sunucu yeniden başlatıldığında her şey yolunda gitti, ancak bir sonraki kaydetmede artık yeniden derlenmedi. Sorun, büyük harfle yazılmış içe aktarma dosyası yolundaydı. Bu sorunu çözmek çok zor çünkü her şey sunucunun yeniden başlatılmasıyla çalışıyor. Yollarınızın durumunu kontrol edin.

Benim için yeniden derlenmiyordu ama sonra webpack'in bağımlılık grafiğini izlediğini ve sadece bir klasörü (veya dosyaları) değil, izlediğini fark ettim / hatırladım. Tabii ki değiştirdiğim dosyalar henüz o grafiğin bir parçası değildi.

Benim için VS Code'da klasörler ve dosyalar oluşturmak sorun oldu. Düzeltmek için depomu yeniden klonladım ve bu sefer Kod yerine komut satırından yeni klasörler ve dosyalar oluşturdum. Sanırım Code bir sebepten dolayı dosyaları bozuyordu. Uygulamanın yeni güncellendiğini gördüm, bu yüzden belki de yeni bir hata.

Benzer bir sorun yaşadım, ne web paketi ne de yaptığım değişiklikleri yakalayan izleme modunda toplama. Henüz uygulamada herhangi bir yere aktarılmamış modülü (.tsx dosyası) değiştirirken bunun temelde benim hatam olduğunu öğrendim (örneğin, giriş noktası olan App.ts) ve hataları rapor edecek derleme araçlarının bekliyordum. orada yapıldı.

Sorunu çözme şeklim, bir içe aktarma yolunda büyük harf kullanımı hatası bulmaktı. Dosya sistemindeki klasörün ilk harfi küçüktü, içe aktarma yolu büyük harfti. Her şey iyi derlendi, bu yüzden bu sadece bir web paketi izleme sorunu içeriyordu.

Ayrıca bu sorun, rsync senkronizasyonu ile Vagrant (2.1.15) kullanan bir VirtualBox (5.2.18) Ubuntu (18.04) VM'de yaşandı. Birdenbire, ilk derleme harika çalışır ancak Webpack, fs.inotify.max_user_watches=524288sette bile sonradan değişiklikleri dikkate almaz . poll: trueWebpack yapılandırmasına eklemek de yardımcı olmadı.

Yalnızca vagrant-notify-forwarderçalıştı (bazı nedenlerden dolayı vagrant-fsnotify çalışmadı), ancak daha sonra yeniden oluşturma, dosyayı ana bilgisayara kaydettikten sonra çok hızlı gerçekleşti ve rsync'in görevini bitirmek için yeterli zamanı olmadığını düşünüyorum (belki de miktar nedeniyle Vagrantfile dosyamın içinde senkronize edilmiş dizinler?).

Sonunda, aggregateTimeoutWebpack yapılandırmamdaki yapılandırmayı da artırarak saatin tekrar çalışmasını sağladım:

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

Bu çözüm sizin için işe yararsa, bu değeri tekrar düşürmeyi deneyin, aksi takdirde kaydet'e her bastığınızda yapı yeniden başlayana kadar 10 saniye beklemeniz gerekir. Varsayılan değer 300 ms'dir .

Benim durumumdaki sebep neydi:

Görünüşe göre: max_user_watches in the değeri /proc/sys/fs/inotify/max_user_watches web paketini etkiliyor

Gerçek değerinizi kontrol etmek için

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

16384 benim durumumdaydı ve hala yeterli değildi.

Aşağıdakiler gibi farklı türde çözümler denedim:

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

Ancak, değeri değiştirsem bile, bilgisayarımı yeniden başlattığımda varsayılan olan 16384'e geri dönecek gibi görünüyor.

ÇÖZÜM Linux işletim sisteminiz varsa (benim durumum, Manjaro'ya sahibim):

Dosyayı oluşturun:

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

Ve şununla doldurun:

fs.inotify.max_user_watches=200000

200000 benim için yeterli görünüyor.

Dosyayı oluşturduktan ve değeri ekledikten sonra, sadece bilgisayarı yeniden başlatmanız yeterli.

Bende de aynı sorun var. Klasörümde bazı karakterler (*) bulunduğundan derlenmediğini fark ettim. Ve eski gözlemci eklentisini kullanmak sorunu çözüyor gibi görünüyor. Bu satırı web paketi yapılandırma dosyanıza ekleyin.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Benim node_modulesiçin tüm paketleri kurmak için npm kurulumunu veya ipliği silmek ve tekrar yapmak sorunu çözdü

MacOS'ta kolay bir çözüm şudur:

Projenizin bulunduğu dizinde iki terminal penceresi açın.

İlk terminal penceresinde şunu çalıştırın: web paketi - izle

İkinci terminal pencerelerinde şunu çalıştırın: webpack-dev-server

Birçok olası çözümü denedim ve bu en güvenilir gibi görünüyor

Olası çözüm: içeriği uygulama dizinine değiştirmek.

Tüm web paketi yapılandırma dosyalarımı bir alt klasörde tuttum:

components/
webpack/
 development.js
app.js

İçinde webpack/development.jsset context: path.join(__dirname, '../')sorunumu çözdü.

Bu sorunu çözmek için bir avuç strateji denedikten sonra sadece pes ettim ama sonra başka bir sorunu çözerken tekrar denedim ve aniden --watchbayrak nihayet çalışıyordu.

Dürüst olmak gerekirse, özellikle neyin işe yaradığını bilmiyorum, ancak aşağıdaki adımları uyguladıktan sonra çalışmaya başladı:

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++

Bu paketleri kurarken bazı bağımlılıklar bulmacanın eksik parçasını eklemiş olabilir, kim bilir ...

Umarım bu, çalışmasını sağlamak için orada mücadele eden herkese yardımcı olur.

Başka bir cevap ekliyorum çünkü bunun şimdiye kadarki en iyi çözüm olduğuna inanıyorum. Her gün kullanıyorum ve harika! Sadece bu kitaplığı kurun:

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

Açıklama: webpack-dev-server programını paket dosyalarını dosya sistemine yazmaya zorlar.

Nasıl kurulur :

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

Değiştirmeyi deneyin --watchiçin-d --watch

benim için çalıştı

Bu, projenizde aniden olduysa, bu sorunu çözebilir.

Belki bir şekilde, web paketinin aradığı projenizin değişikliklerini izleyen dosyalar bozulmuştur. Basit adımları izleyerek bunları yeniden oluşturabilirsiniz.

1. projenizden çıkın. ($: cd ..)
2. projenizi farklı bir dizine taşıyın ($: mv {projectName} {newName})
3. yeni dizine gidin ($: cd {newName})
4. sunucuyu başlatın ve her dosya değişikliğinde yeniden yüklenip yüklenmediğini kontrol edin (çoğu durumda çalışmalıdır, çünkü artık web paketi değişiklikleri izlemek için yeni dosyalar oluşturur)
5. dizinden çık ($: cd ..)
6. orijinal adına geri taşıyın ($: mv {newName} {projectNam}) Bu benim için çalıştı ............

Benzer bir sorunla karşılaştığımda bu soruyla karşılaştım - webpack --config çalıştırırken bile webpack'in geri ödeme yapmadığı ortaya çıktı.

Bundle.js'yi bile sildim ve web sayfası düzenlemelerimden önceki gibi görüntüleniyordu.

Aynı sorunu yaşayanlarınız için, sonunda kromda 'boş önbellek ve sert yeniden yükleme' seçeneğini yaptım (devtools açıkken yeniden yükleme düğmesine sağ tıklayın) ve bu hile yaptı

Pek çok şey, aynı sorunu buluştu çalıştı, nihayet Krom Tarama Verilerini Temizle üzerinde Mac benim için çalıştı.

Bu modüller kuruldu:

"browser-sync": "^ 2.26.7",

"tarayıcı-senkronizasyon-web paketi-eklentisi": "^ 2.2.2",

"web paketi": "^ 4.41.2",

"webpack-cli": "^ 3.3.9"

Sorun .js ve .ts dosyaları arasındaki mesafedeydi. Neden ?

Proje derlemesinde, Visual Studio, typcript dosyalarını .js ve .js.map olarak derler. Bu tamamen gereksizdir, çünkü web paketi typcript dosyalarını da işler (harika typcript-loader ile). Visual Studio Code'da veya Devre dışı bırakılmış compileOnSave ile bileşen .tsx dosyalarını düzenlerken tsconfig.json'da seçeneği , düzenlenen ts dosyası yeniden derlenmiyor ve web paketim gerçek olmayan .js dosyasını işliyordu.

Çözüm, proje derlemesinde visual studio'da typcript dosyalarını derlemeyi devre dışı bırakmaktı. Ekle

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

.csproj öğenizin PropertyGroup'ta.