webpack --watch tidak mengompilasi file yang diubah

Saya mencoba menjalankan webpack --watchdan setelah mengedit file JS saya, itu tidak memicu kompilasi ulang otomatis.

Saya sudah mencoba menginstal ulang webpackmenggunakan npm uninstalltetapi masih tidak berfungsi.

Ada ide?

FYI: tampaknya OS X dapat memiliki folder yang rusak dan tidak lagi mengirim fsevents(yang watchpack/ chokidar/ Finder gunakan) untuk dirinya sendiri dan folder anak apa pun. Saya tidak yakin ini yang terjadi pada Anda, tetapi sangat membuat saya dan rekan kerja frustasi.

Kami dapat mengganti nama folder induk yang rusak dan kemudian menonton acara langsung muncul seperti yang diharapkan. Lihat postingan blog ini untuk info lebih lanjut: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

Perbaikan yang disarankan dari tautan di atas adalah:

• me-reboot komputer
• memeriksa disk dan memperbaiki izin melalui Disk Utility
• menambahkan folder ke daftar privasi Spotlight (daftar folder yang tidak akan diindeks), dan kemudian menghapusnya, secara efektif memaksa pengindeksan ulang
• mengganti nama folder, dan mungkin mengganti namanya kembali
• membuat ulang folder dan memindahkan konten lama kembali ke dalamnya

Dua yang pertama tidak berhasil untuk kami, tidak mencoba saran Spotlight, dan pembuatan ulang tidak terbukti perlu.

Kami dapat menemukan folder akar masalah dengan membuka Finder dan membuat file di setiap folder induk berturut-turut hingga salah satunya muncul dengan segera (karena Finder juga akan disemprot oleh bug ini). Folder paling root yang tidak diperbarui adalah pelakunya. Kami tinggal mvmelakukannya dan mvmengembalikannya ke nama aslinya, dan kemudian pengamat bekerja.

Tidak tahu apa yang menyebabkan korupsi, tapi saya senang bisa memperbaikinya.

Jika kode Anda tidak dikompilasi ulang, coba tingkatkan jumlah pengamat (di Ubuntu):

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

Sumber: https://webpack.github.io/docs/troubleshooting.html

Menambahkan kode berikut ke file konfigurasi webpack saya memperbaiki masalah untuk saya, semoga ini membantu. Jangan lupa untuk mengabaikan folder node_modules Anda, karena itu akan mematikan kinerja untuk HMR (Penggantian Modul Panas):

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

Saya mengalami masalah ini saat bekerja dengan WebStorm.

Menonaktifkan Pengaturan -> Pengaturan Sistem -> "tulis aman" menyelesaikannya untuk saya.

Temukan rekomendasi untuk melakukannya di: Pemecahan Masalah WebPack

Hanya untuk menambahkan solusi yang mungkin: Saya memiliki folder proyek saya di dalam folder Dropbox, memindahkannya menyelesaikan masalah bagi saya. (OS X)

Kepekaan huruf besar / kecil folder adalah masalah saya. Kode saya memanggil ke require () memiliki semua nama jalur huruf kecil TETAPI sebenarnya direktori memiliki huruf besar di dalamnya. Saya mengganti nama semua direktori saya menjadi huruf kecil dan menonton webpack bekerja secara instan.

Satu masalah adalah jika nama jalur Anda tidak mutlak maka hal seperti ini akan terjadi. Saya tidak sengaja menyetel resolve.rootke ./alih-alih __dirnamedan ini menyebabkan saya membuang banyak waktu untuk menghapus dan membuat ulang file seperti orang-orang di atas saya.

Jika mengubah fs.inotify.max_user_watches seperti yang ditunjukkan oleh César masih tidak berhasil, coba gunakan polling daripada pengamat asli dengan membuat skrip Anda seperti yang ditunjukkan dalam dokumen atau menjalankan webpack dengan --watch --watch-pollopsi.

Perhatikan bahwa jika Anda menjalankan webpack dalam mesin virtual (Vagrant / Virtualbox) dan Anda mengubah file Anda di platform host, pembaruan file di folder bersama mungkin tidak memicu inotify di Ubuntu. Itu akan menyebabkan perubahan tidak diambil oleh webpack.

lihat: tiket Virtualbox # 10660

Dalam kasus saya, mengedit dan menyimpan file di de guest (in vi) memang memicu webpack. Mengeditnya di host (di PhpStorm, Notepad atau aplikasi lain) TIDAK memicu webpack apa pun yang saya lakukan.

Saya menyelesaikannya dengan menggunakan vagrant-fsnotify .

Bekerja untuk saya di Laravel Homestead

--watch --watch-poll

Pembaruan: menghapus seluruh direktori dan kloning git lagi dari repo memperbaiki masalah saya.

Jika Anda menggunakan Vim, Anda harus mencoba mengatur backupcopy ke yes daripada default auto. Jika tidak, Vim terkadang akan mengganti nama file asli dan membuat yang baru, yang akan mengacaukan jam webpack:

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

Cukup tambahkan ini ke pengaturan vim Anda jika ini masalahnya:

set backupcopy = yes

Saya mengalami masalah yang sama pada file .vue. Ketika server dimulai ulang semuanya berfungsi dengan baik, tetapi pada penyimpanan berikutnya tidak dikompilasi ulang lagi. Masalahnya ada pada jalur file impor yang memiliki satu huruf kapital. Sangat sulit untuk memahami masalah ini karena semuanya bekerja pada reboot server. Periksa kasus jalur Anda.

Itu tidak mengkompilasi ulang untuk saya tetapi kemudian saya menyadari / ingat bahwa webpack melihat grafik ketergantungan dan bukan hanya folder (atau file). Benar saja, file yang saya ubah belum menjadi bagian dari grafik itu.

Bagi saya, membuat folder dan file di VS Code adalah masalahnya. Untuk memperbaikinya, saya mengkloning ulang repo saya dan kali ini, membuat folder dan file baru melalui baris perintah alih-alih Kode. Saya pikir Kode merusak file karena alasan tertentu. Saya melihat aplikasinya baru saja diperbarui jadi mungkin ini bug baru.

Saya memiliki masalah serupa, baik webpack atau rollup dalam mode jam tangan tidak menangkap perubahan yang saya buat. Saya menemukan bahwa pada dasarnya itu adalah kesalahan saya ketika saya mengubah modul (file .tsx) yang belum diimpor di mana pun dalam aplikasi (misalnya App.ts yang merupakan titik masuk) dan saya mengharapkan alat build untuk melaporkan kesalahan saya dibuat di sana.

Cara saya menyelesaikan masalah adalah menemukan kesalahan kapitalisasi di jalur impor. Folder pada sistem file memiliki huruf kecil pertama, jalur impor adalah huruf besar. Semuanya dikompilasi dengan baik, jadi ini hanya masalah jam tangan webpack.

Juga memiliki masalah ini di dalam VM VirtualBox (5.2.18) Ubuntu (18.04) menggunakan Vagrant (2.1.15) dengan sinkronisasi rsync. Tiba-tiba, build pertama berjalan dengan baik tetapi Webpack tidak mempertimbangkan perubahan setelahnya, bahkan denganfs.inotify.max_user_watches=524288 set. Menambahkanpoll: true konfigurasi Webpack juga tidak membantu.

Hanya vagrant-notify-forwarder berfungsi (vagrant-fsnotify tidak, untuk beberapa alasan), tetapi kemudian pembangunan kembali terjadi terlalu cepat setelah menyimpan file di host dan saya kira rsync tidak memiliki cukup waktu untuk menyelesaikan tugasnya (mungkin karena jumlahnya direktori yang disinkronkan di dalam Vagrantfile saya?).

Akhirnya saya membuat jam tangan berfungsi lagi dengan juga meningkatkan aggregateTimeoutkonfigurasi di Webpack saya:

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

Jika solusi ini berhasil untuk Anda, coba turunkan nilai ini lagi, jika tidak, Anda harus menunggu 10 detik hingga build dimulai ulang setiap kali Anda menekan simpan. Nilai defaultnya adalah 300 ms .

Apa penyebab dalam kasus saya:

Tampaknya nilai: max_user_watches in the /proc/sys/fs/inotify/max_user_watches mempengaruhi webpack

Untuk memeriksa nilai Anda yang sebenarnya

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

16384 dalam kasus saya dan itu masih belum cukup.

Saya mencoba berbagai jenis solusi seperti:

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

Tetapi tampaknya meskipun saya mengubah nilainya, ketika saya me-restart PC saya, itu akan kembali ke default yang 16384.

SOLUSI jika Anda memiliki OS Linux (kasus saya, saya punya Manjaro):

Buat file:

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

Dan isi dengan:

fs.inotify.max_user_watches=200000

Sepertinya 200000 sudah cukup bagi saya.

Setelah Anda membuat file dan menambahkan nilainya, cukup restart PC dan Anda akan baik-baik saja.

Saya memiliki masalah yang sama. Dan saya perhatikan itu tidak dikompilasi karena folder saya berisi beberapa karakter (*). Dan menggunakan plugin pengamat lama tampaknya menyelesaikan masalah. Tambahkan baris ini ke file konfigurasi webpack Anda.

plugins: [
    new webpack.OldWatchingPlugin()
  ]

Bagi saya menghapus node_modulesdan melakukan npm install atau benang lagi untuk menginstal semua paket memecahkan masalah

Solusi mudah di MacOS adalah sebagai berikut:

Buka dua jendela terminal di direktori yang sama dengan proyek Anda.

Di jendela terminal pertama, jalankan: webpack --watch

Di jendela terminal kedua jalankan: webpack-dev-server

Saya telah mencoba banyak solusi yang mungkin dan ini tampaknya yang paling dapat diandalkan

Solusi yang memungkinkan: mengubah konteks ke direktori aplikasi.

Saya memiliki semua file konfigurasi webpack saya di sub folder:

components/
webpack/
 development.js
app.js

Dalam webpack/development.js, set context: path.join(__dirname, '../')memecahkan masalah saya.

Setelah mencoba beberapa strategi untuk memperbaiki masalah ini, saya akhirnya menyerah, tetapi ketika menyelesaikan masalah lain saya mencoba lagi dan tiba-tiba --watchbendera itu akhirnya berfungsi.

Sejujurnya saya tidak tahu apa yang secara khusus membuatnya berfungsi tetapi setelah melakukan langkah-langkah berikut ini baru mulai berfungsi:

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

Mungkin saja terjadi ketika menginstal paket-paket ini beberapa ketergantungan baru saja menambahkan potongan teka-teki yang hilang, siapa tahu ...

Semoga ini membantu siapa pun yang berjuang di luar sana untuk membuatnya bekerja.

Saya menambahkan jawaban lain karena saya yakin ini adalah solusi terbaik sejauh ini. Saya menggunakannya setiap hari dan itu keren! Instal saja perpustakaan ini:

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

Deskripsi: Memaksa program webpack-dev-server untuk menulis file bundel ke sistem file.

Bagaimana cara meng-install :

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

Coba ganti --watchke-d --watch

bekerja untuk saya

Jika ini terjadi secara tiba-tiba dalam proyek Anda, ini dapat memperbaiki masalahnya.

Mungkin entah bagaimana file yang melacak proyek Anda berubah yang dicari webpack rusak. Anda dapat membuatnya lagi hanya dengan mengikuti langkah-langkah sederhana.

1. keluar dari direktori proyek Anda. ($: cd ..)
2. pindahkan proyek Anda ke direktori lain ($: mv {projectName} {newName})
3. buka direktori baru ($: cd {newName})
4. mulai server dan periksa apakah itu memuat ulang pada setiap perubahan file (seharusnya berfungsi dalam banyak kasus, karena sekarang webpack membuat file baru untuk mengawasi perubahan)
5. keluar dari direktori ($: cd ..)
6. pindahkan kembali ke nama aslinya ($: mv {newName} {projectNam}) Ini berhasil untuk saya ............

Saya menemukan pertanyaan ini ketika saya mengalami masalah yang sama-- tampaknya webpack tidak melakukan rebundling, bahkan ketika menjalankan webpack --config.

Saya bahkan menghapus bundle.js dan halaman web masih ditampilkan seperti sebelum pengeditan saya.

Bagi Anda yang mendapatkan masalah yang sama, akhirnya saya melakukan opsi 'cache kosong dan muat ulang' di chrome (klik kanan tombol muat ulang dengan devtools terbuka) dan itu berhasil.

Saya menemui masalah yang sama, mencoba banyak hal, akhirnya Chrome Hapus Data Penjelajahan di Mac berfungsi untuk saya.

Modul ini telah dipasang:

"browser-sync": "^ 2.26.7",

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

"webpack": "^ 4.41.2",

"webpack-cli": "^ 3.3.9"

Masalah ada dalam perbedaan antara file .js dan .ts. Kenapa?

Pada pembuatan proyek, Visual Studio mengompilasi file skrip menjadi .js dan .js.map. Ini sama sekali tidak diperlukan, karena webpack menangani file skrip juga (dengan awesome-typescript-loader). Saat mengedit file compileOnSave dalam kode Visual Studio atau dengan compileOnSave opsi di tsconfig.json, file ts yang diedit tidak dikompilasi ulang dan webpack saya sedang memproses file .js yang tidak sebenarnya.

Solusinya adalah menonaktifkan kompilasi file skrip di studio visual pada pembangunan proyek. Menambahkan

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

di PropertyGroup dari .csproj Anda.