page online docs dev body app javascript webpack fsevents

javascript - online - webpack--watch no está compilando archivos modificados



webpack-dev-server (29)

Intenté ejecutar webpack --watch y después de editar mis archivos JS, no desencadena una recompilación automática.

Intenté reinstalar el webpack usando la npm uninstall pero todavía no funciona.

¿Algunas ideas?

Actualizaciones: la eliminación de todo el directorio y la clonación git nuevamente desde el repositorio solucionan mi problema.

Agregar el siguiente código a mi archivo de configuración de paquete web solucionó el problema para mí, espero que esto ayude. No olvide ignorar su carpeta node_modules, ya que eso mataría el rendimiento de HMR (Hot Module Replacement):

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

Después de probar un puñado de estrategias para solucionar este problema, terminé simplemente dándome por vencido, pero luego, mientras resolvía otro problema, intenté nuevamente y, de repente, la bandera --watch finalmente estaba funcionando.

Para ser sincero, no sé qué lo hizo funcionar específicamente, pero después de realizar los siguientes pasos, comenzó a funcionar:

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

Podría haber sucedido que mientras instalaba estos paquetes alguna dependencia acababa de agregar la pieza faltante del rompecabezas, quién sabe ...

Espero que esto ayude a cualquiera que esté luchando para que funcione.

Encontré el mismo problema, probé muchas cosas, finalmente Chrome Clear Browsing Data en Mac funcionó para mí.

Estos módulos se han instalado:

"browser-sync": "^ 2.26.7",

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

"webpack": "^ 4.41.2",

"webpack-cli": "^ 3.3.9"

Estaba teniendo el mismo problema en un archivo .vue. Cuando el servidor se reinició, todo funcionó bien, pero en el siguiente guardado ya no se volvió a compilar. El problema estaba en la ruta del archivo de importación que tenía una letra en mayúscula. Es muy difícil resolver este problema porque todo funciona en un reinicio del servidor. Comprueba el caso de tus caminos.

Estoy agregando otra respuesta porque creo que esta es la mejor solución hasta ahora. ¡Lo estoy usando todos los días y es genial! Simplemente instale esta biblioteca:

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

Descripción: fuerza al programa webpack-dev-server a escribir paquetes de archivos en el sistema de archivos.

Cómo instalar :

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

FYI: parece que OS X puede hacer que una carpeta se corrompa y ya no envíe fsevents (que watchpack / chokidar / Finder) para sí misma y cualquier carpeta secundaria. No puedo estar seguro de que esto es lo que te pasó, pero fue muy frustrante para mí y un colega.

Pudimos cambiar el nombre de la carpeta principal corrupta y luego ver los eventos inmediatamente como se esperaba. Consulte esta publicación de blog para obtener más información: http://feedback.livereload.com/knowledgebase/articles/86239-os-x-fsevents-bug-may-prevent-monitoring-of-certai

Las soluciones recomendadas desde el enlace anterior son:

  • reiniciar la computadora
  • comprobar el disco y reparar permisos a través de la Utilidad de Discos
  • agregar la carpeta a la lista de privacidad de Spotlight (la lista de carpetas para no indexar) y luego eliminarla, forzando efectivamente una reindexación
  • renombrar la carpeta, y luego posiblemente renombrarla
  • volver a crear la carpeta y volver a mover los contenidos antiguos

Los dos primeros no funcionaron para nosotros, no probaron la sugerencia de Spotlight y la recreación no resultó necesaria.

Pudimos encontrar la carpeta del problema raíz abriendo Finder y creando archivos en cada carpeta principal sucesiva hasta que apareciera una de inmediato (ya que Finder también se encargará de este error). La carpeta más raíz que no se actualiza es la culpable. Simplemente lo mv y recuperamos su nombre original, y luego el observador funcionó.

No tengo idea de qué causa la corrupción, pero me alegra tener una solución.

He tenido este problema al trabajar con WebStorm.

Deshabilitar Configuración -> Configuración del sistema -> "escritura segura" lo resolvió por mí.

Encontré la recomendación para hacerlo en: Solución de problemas de WebPack

Intenta cambiar --watch a -d --watch

trabajó para mi

La cuestión es: webpack carga el script de alguna url extraña: webpack: /// que se almacena en caché. Debe agregar la versión al final de su script para evitar el almacenamiento en caché: main-compiled.js?v=<?php echo time()?>"

La forma en que resolví el problema fue encontrar un error de capitalización en una ruta de importación. La carpeta en el sistema de archivos tenía la primera letra minúscula, la ruta de importación era mayúscula. Todo se compiló bien, por lo que esto fue solo un problema de reloj de paquete web.

La sensibilidad a mayúsculas y minúsculas fue mi problema. Mis llamadas de código para require () tenían todos los nombres de ruta en minúsculas PERO los directorios en realidad tenían una letra mayúscula en ellos. Cambié el nombre de todos mis directorios a minúsculas y la visualización de paquetes web funcionó al instante.

Me encontré con esta pregunta cuando tenía un problema similar: parecía que webpack no se estaba reagrupando, incluso cuando se ejecutaba webpack --config.

Incluso eliminé bundle.js y la página web todavía se mostraba como antes de mis ediciones.

Para aquellos de ustedes que tienen este mismo problema, finalmente hice la opción ''vaciar caché y recarga dura'' en Chrome (haga clic derecho en el botón de recarga con las herramientas de desarrollo abiertas) y eso hizo ese truco

No fue una recompilación para mí, pero luego me di cuenta / recordé que webpack mira el gráfico de dependencia y no solo una carpeta (o archivos). Efectivamente, los archivos que estaba cambiando todavía no formaban parte de ese gráfico.

Para mí, crear carpetas y archivos en VS Code fue el problema. Para solucionarlo, volví a clonar mi repositorio y esta vez, creé nuevas carpetas y archivos a través de la línea de comandos en lugar de Code. Creo que Code estaba corrompiendo los archivos por alguna razón. Vi que la aplicación acababa de actualizarse, así que quizás sea un nuevo error.

Para mí, eliminar node_modules y hacer npm install o yarn nuevamente para instalar todos los paquetes resolvió el problema

Posible solución: cambiar el contexto al directorio de la aplicación.

Tenía todos mis archivos de configuración de paquete web en una subcarpeta:

components/ webpack/ development.js app.js

En webpack/development.js , establecer context: path.join(__dirname, ''../'') resolvió mi problema.

Si cambiar fs.inotify.max_user_watches como señal de César aún no funciona, intente usar el sondeo en lugar de los observadores nativos creando su script como se muestra en los docs o ejecutando el paquete web con las --watch --watch-poll .

Si está utilizando Vim, debe intentar configurar la copia de seguridad en sí en lugar de la configuración automática predeterminada. De lo contrario, Vim a veces cambiará el nombre del archivo original y creará uno nuevo, lo que afectará al reloj webpack:

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

Simplemente agregue esto a su configuración de vim si este es el caso:

establecer copia de seguridad = sí

Si esto sucedió repentinamente en su proyecto, esto podría solucionar el problema.

Tal vez de alguna manera los archivos que estaban rastreando su proyecto cambian y que el paquete web busca se corrompieron. Puede volver a crearlos simplemente siguiendo simples pasos.

  1. salga de su proyecto dir. ($: cd ..)
  2. mueva su proyecto a un directorio diferente ($: mv {projectName} {newName})
  3. ir al nuevo directorio ($: cd {newName})
  4. inicie el servidor y verifique si se recarga en cada cambio de archivo (debería funcionar en la mayoría de los casos, porque ahora el paquete web crea nuevos archivos para observar los cambios)
  5. salir del directorio ($: cd ..)
  6. moverlo de nuevo a su nombre original ($: mv {newName} {projectNam}) Esto funcionó para mí ............

Solo para agregar a posibles soluciones: tenía mi carpeta de proyecto dentro de una carpeta de Dropbox, moverla resolvió el problema para mí. (OS X)

También tuve este problema dentro de una VM VirtualBox (5.2.18) Ubuntu (18.04) usando Vagrant (2.1.15) con sincronización rsync. De repente, la primera compilación se ejecuta muy bien, pero Webpack no toma en consideración los cambios posteriores, incluso con fs.inotify.max_user_watches=524288 establecido. Agregar poll: true en la configuración de Webpack tampoco ayudó.

Solo funcionó vagrant-notify vagrant-notify-forwarder (vagrant-fsnotify no lo hizo, por alguna razón), pero luego la reconstrucción ocurrió demasiado rápido después de guardar el archivo en el host y supongo que rsync no tuvo suficiente tiempo para terminar su tarea ( tal vez debido a la cantidad de directorios sincronizados dentro de mi Vagrantfile?).

Finalmente hice que el reloj volviera a funcionar al aumentar el aggregateTimeout de Timeout en mi configuración de Webpack:

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

Si esta solución funciona para usted, intente reducir este valor nuevamente, de lo contrario tendrá que esperar 10 segundos hasta que la compilación se reinicie cada vez que presione guardar. El valor predeterminado es 300 ms .

Tenga en cuenta que si ejecuta webpack dentro de una máquina virtual (Vagrant / Virtualbox) y cambia sus archivos en la plataforma host, las actualizaciones de archivos en la carpeta compartida pueden no activar inotify en Ubuntu. Eso hará que los cambios no sean recogidos por webpack.

ver: boleto Virtualbox # 10660

En mi caso, editar y guardar el archivo en de guest (en vi) desencadenó webpack. Editarlo en el host (en PhpStorm, Notepad o cualquier otra aplicación) NO activa el paquete web, sea lo que sea que hice.

Lo resolví usando vagrant-fsnotify .

Tengo el mismo problema. Y noto que no se está compilando porque mi carpeta contiene algún carácter (*). Y el uso del antiguo complemento de vigilancia parece resolver el problema. Agregue esta línea a su archivo de configuración de paquete web.

plugins: [ new webpack.OldWatchingPlugin() ]

Trabaja para mí en Laravel Homestead

--watch --watch-poll

Tuve un problema similar, ni el paquete web ni el paquete acumulativo en el modo de reloj vieron los cambios que hice. Descubrí que era básicamente mi culpa, ya que estaba cambiando el módulo (archivo .tsx) que aún no se había importado a ninguna parte de la aplicación (por ejemplo, App.ts, que es el punto de entrada) y esperaba que las herramientas de compilación informaran errores. hecho allí.

Un problema es que si sus nombres de ruta no son absolutos, sucederán cosas como esta. Accidentalmente configuré resolve.root a ./ lugar de __dirname y esto me hizo perder mucho tiempo borrando y recreando archivos como los chicos de arriba.

Una solución fácil en MacOS es la siguiente:

Abra dos ventanas de terminal en el mismo directorio donde reside su proyecto.

En la primera ventana de terminal, ejecute: webpack --watch

En la segunda ventana de Windows, ejecute: webpack-dev-server

He probado muchas soluciones posibles y esta parece ser la más confiable.