webpack --watch ไม่รวบรวมไฟล์ที่เปลี่ยนแปลง

ฉันลองเรียกใช้webpack --watchและหลังจากแก้ไขไฟล์ JS แล้วมันไม่ทริกเกอร์การคอมไพล์อัตโนมัติ

ฉันได้ลองติดตั้งใหม่webpackโดยใช้npm uninstallแต่ก็ยังใช้ไม่ได้

ความคิดใด ๆ ?

FYI: ดูเหมือนว่า OS X อาจทำให้โฟลเดอร์เสียหายและไม่มีการส่งfsevents(ซึ่งwatchpack/ chokidar/ Finder ใช้) สำหรับตัวเองและโฟลเดอร์ย่อยอีกต่อไป ฉันไม่แน่ใจว่านี่คือสิ่งที่เกิดขึ้นกับคุณ แต่มันทำให้ฉันและเพื่อนร่วมงานผิดหวังมาก

เราสามารถเปลี่ยนชื่อโฟลเดอร์หลักที่เสียหายจากนั้นดูเหตุการณ์ที่เกิดขึ้นทันทีตามที่คาดไว้ ดูข้อมูลเพิ่มเติมในบล็อกโพสต์นี้: http://livereload.com/troubleshooting/os-x-fsevents-bug-may-prevent-monitoring-of-certain-folders/

การแก้ไขที่แนะนำจากลิงค์ด้านบน ได้แก่ :

• รีบูตเครื่องคอมพิวเตอร์
• ตรวจสอบดิสก์และซ่อมแซมสิทธิ์ผ่านยูทิลิตี้ดิสก์
• การเพิ่มโฟลเดอร์ลงในรายการความเป็นส่วนตัวของ Spotlight (รายการโฟลเดอร์ที่จะไม่จัดทำดัชนี) จากนั้นนำออกจากโฟลเดอร์นั้นโดยบังคับให้มีการทำดัชนีใหม่อย่างมีประสิทธิภาพ
• เปลี่ยนชื่อโฟลเดอร์แล้วอาจเปลี่ยนชื่อกลับ
• สร้างโฟลเดอร์ขึ้นมาใหม่และย้ายเนื้อหาเก่ากลับเข้าไป

สองข้อแรกไม่ได้ผลสำหรับเราไม่ได้ลองใช้คำแนะนำของ Spotlight และการสร้างใหม่ไม่ได้พิสูจน์ว่าจำเป็น

เราสามารถค้นหาโฟลเดอร์ปัญหารูทได้โดยการเปิด Finder และสร้างไฟล์ในแต่ละโฟลเดอร์หลักที่ต่อเนื่องกันจนกว่าจะมีไฟล์ปรากฏขึ้นในทันที (เนื่องจาก Finder จะถูกดักฟังโดยจุดบกพร่องนี้เช่นกัน) โฟลเดอร์รูทส่วนใหญ่ที่ไม่อัปเดตเป็นตัวการ เราแค่mv'd มันและmv' d มันกลับไปเป็นชื่อเดิมจากนั้นผู้เฝ้าดูก็ทำงาน

ไม่รู้ว่าอะไรเป็นสาเหตุของการทุจริต แต่ฉันดีใจที่มีการแก้ไข

หากโค้ดของคุณไม่ได้ถูกคอมไพล์ใหม่ให้ลองเพิ่มจำนวนผู้เฝ้าดู (ใน 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 (Hot Module Replacement) ลดลง:

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

ฉันมีปัญหานี้เมื่อทำงานกับ WebStorm

ปิดการใช้งานการตั้งค่า -> การตั้งค่าระบบ -> "เขียนอย่างปลอดภัย"แก้ไขให้ฉัน

พบคำแนะนำให้ทำใน: การแก้ไขปัญหา WebPack

เพียงเพื่อเพิ่มวิธีแก้ปัญหาที่เป็นไปได้: ฉันมีโฟลเดอร์โครงการของฉันอยู่ในโฟลเดอร์ Dropbox การย้ายออกไปช่วยแก้ปัญหาให้ฉันได้ (OS X)

ความอ่อนไหวของโฟลเดอร์คือปัญหาของฉัน รหัสของฉันเรียกว่าต้องการ () มีชื่อพา ธ ตัวพิมพ์เล็กทั้งหมด แต่จริงๆแล้วไดเร็กทอรีมีอักษรตัวพิมพ์ใหญ่อยู่ในนั้น ฉันเปลี่ยนชื่อไดเรกทอรีทั้งหมดของฉันเป็นตัวพิมพ์เล็กและการดูเว็บแพ็กทำงานได้ทันที

ปัญหาหนึ่งคือหากชื่อพา ธ ของคุณไม่สมบูรณ์สิ่งนี้จะเกิดขึ้น ฉันได้ตั้งค่าresolve.rootเป็น./แทนที่จะเป็นโดยไม่ได้ตั้งใจ__dirnameและทำให้ฉันเสียเวลามากในการลบและสร้างไฟล์ใหม่เหมือนคนที่อยู่ข้างบนฉัน

การอัปเดต: การลบไดเร็กทอรีทั้งหมดและการโคลน git อีกครั้งจาก repo ช่วยแก้ปัญหาของฉัน

หากการเปลี่ยน fs.inotify.max_user_watches ตามที่Césarชี้ให้เห็นยังไม่ได้ผลให้ลองใช้การสำรวจแทนผู้เฝ้าดูดั้งเดิมโดยการสร้างสคริปต์ของคุณตามที่แสดงในเอกสารหรือเรียกใช้ webpack พร้อม--watch --watch-pollตัวเลือก

โปรดทราบว่าหากคุณเรียกใช้ webpack ภายในเครื่องเสมือน (Vagrant / Virtualbox) และคุณเปลี่ยนไฟล์ของคุณบนแพลตฟอร์มโฮสต์การอัปเดตไฟล์ในโฟลเดอร์ที่แชร์อาจไม่ทริกเกอร์ inotify บน Ubuntu ซึ่งจะทำให้การเปลี่ยนแปลงไม่ถูกรับโดย webpack

ดู: ตั๋ว Virtualbox # 10660

ในกรณีของฉันการแก้ไขและบันทึกไฟล์ใน de guest (ใน vi) ทำให้เกิด webpack การแก้ไขบนโฮสต์ (ใน PhpStorm, Notepad หรือแอปพลิเคชันอื่น ๆ ) ไม่เรียกใช้ webpack สิ่งที่ฉันทำ

ฉันจะแก้ไขได้โดยใช้คนจรจัด-fsnotify

ทำงานให้ฉันใน Laravel Homestead

--watch --watch-poll

หากคุณใช้ Vim คุณควรลองตั้งค่าสำเนาสำรองเป็นใช่แทนที่จะเป็นค่าเริ่มต้นอัตโนมัติ มิฉะนั้นบางครั้ง Vim จะเปลี่ยนชื่อไฟล์ต้นฉบับและสร้างไฟล์ใหม่ซึ่งจะทำให้นาฬิกา webpack เสียหาย:

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

เพียงเพิ่มสิ่งนี้ในการตั้งค่ากลุ่มของคุณหากเป็นกรณีนี้:

ตั้งค่า backupcopy = ใช่

ฉันมีปัญหาเดียวกันกับไฟล์. vue เมื่อเซิร์ฟเวอร์รีสตาร์ททั้งหมดทำงานได้ดี แต่ในการบันทึกครั้งต่อไปจะไม่คอมไพล์ใหม่อีกต่อไป ปัญหาเกิดจากเส้นทางไฟล์นำเข้าที่มีตัวอักษรตัวพิมพ์ใหญ่หนึ่งตัว มันยากมากที่จะแก้ไขปัญหานี้เนื่องจากทุกอย่างทำงานบนเซิร์ฟเวอร์รีบูต ตรวจสอบกรณีของเส้นทางของคุณ

มันไม่ใช่การคอมไพล์ใหม่สำหรับฉัน แต่แล้วฉันก็ตระหนัก / จำได้ว่า webpack เฝ้าดูกราฟการอ้างอิงไม่ใช่แค่โฟลเดอร์ (หรือไฟล์) แน่นอนว่าไฟล์ที่ฉันกำลังเปลี่ยนยังไม่ได้เป็นส่วนหนึ่งของกราฟนั้น

สำหรับฉันการสร้างโฟลเดอร์และไฟล์ใน VS Code เป็นปัญหา ในการแก้ไขฉันโคลน repo ของฉันอีกครั้งและคราวนี้สร้างโฟลเดอร์และไฟล์ใหม่ผ่านทางบรรทัดคำสั่งแทน Code ฉันคิดว่า Code ทำให้ไฟล์เสียหายด้วยเหตุผลบางประการ ฉันเห็นแอปพลิเคชันเพิ่งอัปเดตดังนั้นอาจเป็นข้อผิดพลาดใหม่

ฉันมีปัญหาที่คล้ายกันไม่ว่าจะเป็น webpack หรือ rollup ในเครื่องโหมดนาฬิกาที่ตรวจจับการเปลี่ยนแปลงที่ฉันทำ ฉันพบว่าโดยพื้นฐานแล้วเป็นความผิดของฉันขณะที่ฉันกำลังเปลี่ยนโมดูล (ไฟล์. tsx) ซึ่งยังไม่ได้นำเข้าที่ใดก็ได้ในแอปพลิเคชัน (เช่น App.ts ซึ่งเป็นจุดเริ่มต้น) และฉันคาดว่าเครื่องมือสร้างจะรายงานข้อผิดพลาด ทำที่นั่น

วิธีที่ฉันแก้ไขปัญหาคือการพบข้อผิดพลาดในการใช้อักษรตัวพิมพ์ใหญ่ในเส้นทางการนำเข้า โฟลเดอร์ในระบบไฟล์มีอักษรตัวแรกตัวพิมพ์เล็กเส้นทางการนำเข้าเป็นตัวพิมพ์ใหญ่ ทุกอย่างรวบรวมได้ดีดังนั้นนี่จึงเป็นเพียงปัญหาของ Webpack Watch เท่านั้น

ยังมีปัญหานี้ภายใน VirtualBox (5.2.18) Ubuntu (18.04) VM โดยใช้ Vagrant (2.1.15) พร้อมการซิงโครไนซ์ rsync ทันใดนั้นบิลด์แรกก็ทำงานได้ดี แต่ Webpack ไม่ได้นำการเปลี่ยนแปลงมาพิจารณาในภายหลังแม้จะมีการfs.inotify.max_user_watches=524288ตั้งค่าก็ตาม การเพิ่มpoll: trueใน Webpack config ไม่ได้ช่วยเช่นกัน

ใช้งานได้ดีเท่านั้นvagrant-notify-forwarder(vagrant-fsnotify ไม่ได้ด้วยเหตุผลบางประการ) แต่การสร้างใหม่เกิดขึ้นเร็วเกินไปหลังจากบันทึกไฟล์บนโฮสต์และฉันคิดว่า rsync ไม่มีเวลาเพียงพอที่จะทำงานให้เสร็จ (อาจเป็นเพราะจำนวน ของไดเรกทอรีที่ซิงค์ภายใน Vagrantfile ของฉัน?)

ในที่สุดฉันก็ทำให้นาฬิกาทำงานอีกครั้งโดยการเพิ่มการกำหนดค่าaggregateTimeoutWebpack ของฉัน:

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

หากวิธีนี้เหมาะกับคุณให้ลองลดค่านี้ลงอีกครั้งมิฉะนั้นคุณจะต้องรอ 10 วินาทีจนกว่าบิวด์จะรีสตาร์ททุกครั้งที่คุณกดบันทึก ค่าเริ่มต้นคือ300 มิลลิวินาที

อะไรคือสาเหตุในกรณีของฉัน:

ดูเหมือนว่าค่าของ: max_user_watches ใน/proc/sys/fs/inotify/max_user_watches จะมีผลต่อ webpack

เพื่อตรวจสอบมูลค่าที่แท้จริงของคุณ

$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 OS (กรณีของฉันฉันมี Manjaro):

สร้างไฟล์:

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

และเติมด้วย:

fs.inotify.max_user_watches=200000

ดูเหมือนว่า 200000 จะเพียงพอสำหรับฉัน

หลังจากที่คุณสร้างไฟล์และเพิ่มค่าแล้วให้รีสตาร์ทพีซีและคุณก็จะโอเค

ฉันมีปัญหาเดียวกัน และฉันสังเกตว่ามันไม่ได้รวบรวมเพราะโฟลเดอร์ของฉันมีอักขระบางตัว (*) และการใช้ปลั๊กอินตัวเฝ้าดูรุ่นเก่าดูเหมือนจะช่วยแก้ปัญหาได้ เพิ่มบรรทัดนี้ในไฟล์กำหนดค่า webpack ของคุณ

plugins: [
    new webpack.OldWatchingPlugin()
  ]

สำหรับฉันการลบnode_modulesและทำการติดตั้ง npm หรือเส้นด้ายอีกครั้งเพื่อติดตั้งแพ็คเกจทั้งหมดช่วยแก้ปัญหาได้

วิธีง่ายๆบน 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

ทำงานให้ฉัน

หากสิ่งนี้เกิดขึ้นกะทันหันในโครงการของคุณสิ่งนี้สามารถแก้ไขปัญหาได้

บางทีไฟล์ที่ติดตามการเปลี่ยนแปลงโครงการของคุณที่ Webpack มองหาอาจเสียหาย คุณสามารถสร้างใหม่ได้โดยทำตามขั้นตอนง่ายๆ

1. ออกมาจากโครงการของคุณผบ. ($: cd .. )
2. ย้ายโครงการของคุณไปยังไดเรกทอรีอื่น ($: mv {projectName} {newName})
3. ไปที่ dir ใหม่ ($: cd {newName})
4. เริ่มต้นเซิร์ฟเวอร์และตรวจสอบว่ามีการโหลดซ้ำในทุกไฟล์ที่เปลี่ยนแปลงหรือไม่ (ควรใช้งานได้ในกรณีส่วนใหญ่เนื่องจากตอนนี้ webpack สร้างไฟล์ใหม่เพื่อเฝ้าดูการเปลี่ยนแปลง)
5. ออกมาจาก dir ($: cd .. )
6. ย้ายกลับไปเป็นชื่อเดิม ($: mv {newName} {projectNam}) สิ่งนี้ได้ผลสำหรับฉัน ............

ฉันเจอคำถามนี้ตอนที่ฉันประสบปัญหาคล้าย ๆ กัน - ดูเหมือนว่า webpack ไม่ได้รวมกลุ่มใหม่แม้ว่าจะเรียกใช้ webpack --config ก็ตาม

ฉันได้ลบบันเดิล js ไปแล้วและหน้าเว็บก็ยังคงแสดงเหมือนเดิม

สำหรับพวกคุณที่ประสบปัญหาเดียวกันนี้ในที่สุดฉันก็ทำตัวเลือก 'แคชว่างและฮาร์ดรีโหลด' ในโครเมี่ยม (คลิกขวาที่ปุ่มโหลดซ้ำโดยเปิด devtools) และนั่นก็ทำเคล็ดลับนั้น

ฉันพบปัญหาเดียวกันลองทำหลายอย่างในที่สุด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 จะรวบรวมไฟล์ typescript เป็น. js และ. js.map สิ่งนี้ไม่จำเป็นโดยสิ้นเชิงเนื่องจาก webpack จัดการไฟล์ typescript ด้วยเช่นกัน (ด้วยตัวโหลดที่ยอดเยี่ยม) เมื่อแก้ไขไฟล์ส่วนประกอบ. tsx ในVisual Studio CodeหรือตัวเลือกWith disabled compileOnSaveใน tsconfig.json ไฟล์ ts ที่แก้ไขจะไม่ถูกคอมไพล์ใหม่และ webpack ของฉันกำลังประมวลผลไฟล์. js ที่ไม่เป็นจริง

วิธีแก้ไขคือปิดใช้งานการรวบรวมไฟล์ typescript ใน visual studio ในการสร้างโครงการ เพิ่ม

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

ใน PropertyGroup ของ. csproj ของคุณ